Twitter bootstrap 不同高度的自举流体网格系统

我是新手。我想使用具有不同高度和相同宽度的流体栅格系统栅格，如下图所示

---

如何实现相同的功能？请帮帮我。

使用“开箱即用”引导实现这一点的唯一方法是使用4列并在每个列中堆叠项目。当您不知道每列中有多少项时，这对于动态内容并不理想。此外，项目顺序从上到下，而不是从左到右

---

否则，您必须使用jQuery插件，如或，或使用CSS3多列

Jquery插件方法

CSS3柱方法（类似砌体的CSS解决方案）

这不是Bootstrap3的固有特性，而是使用的另一种方法。这种方法的一个缺点是列的顺序是从上到下，而不是从左到右

还有一个类似的问题

2018年更新 Bootstrap 4包括使用CSS3多列的类似砖石的解决方案：

---

正如我所见，您的列具有固定的宽度。 这样你就可以写作了

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

盒
盒
盒

将其复制到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>

自bootstrap 4 alpha版本起：

您还可以使用

.card columns

类来包装引导4

.cards

类元素，以实现Skelly提到的“砖石”列效果：

---

文档：

引导程序

v4.0.0-beta.2

卡列

换行的卡片标题
这是一张较长的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长
Lorem ipsum dolor sit amet，是一位杰出的献身者。整数赌注

在源代码标题中有名的人
卡片标题
此卡片具有以下支持文本，作为附加内容的自然引入
上次更新是在3分钟前

Lorem ipsum dolor sit amet，是一位杰出的献身者。整数posuere-erat

在源代码标题中有名的人
卡片标题
此卡片具有以下支持文本，作为附加内容的自然引入
上次更新是在3分钟前

Lorem ipsum dolor sit amet，是一位杰出的献身者。整数赌注

在源代码标题中有名的人
卡片标题
这是一张更宽的卡片，下面的支持文本是附加内容的自然引入。这张卡片的内容甚至比第一张要长，以显示等高动作
上次更新是在3分钟前

与PHP无关。你可以这样做。每列可能包含具有不同高度的元素–这是默认值。相反，获得等高列要复杂一些。可能与更好的方法重复：）

<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>