Bootstrap不同高度的stream体网格系统

我是Bootstrap新手。 我想要使​​用不同高度和宽度的stream体网格系统网格，如下图所示 。

我怎样才能实现相同的？ 请帮帮我。

Answer 1

使用Bootstrap“开箱即用”做到这一点的唯一方法是使用4列并在每个列中堆叠项目。 对于dynamic内容，如果您不知道每列中包含多less项目，则这并不理想。 此外，这些项目从上到下排列，而不是从左到右 。

<div class="container-fluid"> <div class="row"> <div class="col-md-3"> <!--item1--> <!--item2--> <!--item3--> <!--item4--> </div> <div class="col-md-3"> <!--item5--> <!--item6--> <!--item7--> <!--item8--> </div> <div class="col-md-3"> <!--item--> <!--item--> <!--item--> </div> <div class="col-md-3"> <!--item--> <!--item--> <!--item--> <!--item--> <!--item--> </div> </div> </div> 

---

否则，您必须使用像砌体或同位素的jQuery插件，或者使用CSS3多列。

jquery插件方法

Bootstrap砌体演示
Bootstrap砌体演示2

CSS3栏目方法（砌体式的CSS解决scheme）

这不是Bootstrap 3的本地特性，而是另一种使用CSS多列的方法 。 这种方法的一个缺点是列顺序是从上到下而不是从左到右 。

CSS3多栏式演示

对于类似的问题， 在这个答案中也有更详细的信息 。

2017年更新

Bootstrap 4将包含一个使用CSS3多列的砌体解决scheme： 砌体卡演示

Answer 2

截至引导4阿尔法释放：

你也可以使用.card-columns类来包装你的bootstrap 4 .cards类的元素来实现'砌体'的列效果@Skelly提到：

文档： https ： //v4-alpha.getbootstrap.com/components/card/#columns

Answer 3

把这个复制到你的html的样本体上，看起来比解释更容易理解。

 <div class="container-fluid"> <div class="row"> <div class="col-md-6"> <div class="row"> <div class="col-md-12" style="height:100px; background-color:red"></div> <div class="col-md-12" style="height:100px; background-color:yellow"></div> <div class="col-md-12" style="height:100px; background-color:gray"></div> </div> </div> <div class="col-md-6"> <div class="row"> <div class="col-md-12" style="height:200px; background-color:blue"></div> <div class="col-md-12" style="height:100px; background-color:black"></div> </div> </div> </div> </div> 

Answer 4

正如我可以看到你有固定的宽度在你的列。 所以你可以写

 <div class="col-xs-4"> boxes </div> <div class="col-xs-4"> boxes </div> <div class="col-xs-4"> boxes </div>