带有不同高度列的引导行

我目前有类似的东西：

<div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
</div>

现在假设这content是具有不同高度，宽度都相同的盒子-我该如何保持相同的“基于网格的布局”，又如何使所有盒子彼此对齐，而不是完美的线条。

目前，TWBS将把下一行的下一行col-md-4放在前第三行中的最长元素下。因此，每行项目都完美对齐（整洁）-太棒了，我希望每一项都直接位于最后一个元素的下方（“砌体”布局）

这是一个受欢迎的Bootstrap问题，因此我更新并扩展了Bootstrap 3和Bootstrap 4的答案...

出现Bootstrap 3 “高度问题”，因为使用列float:left。当列“浮动”时，它将从文档的正常流程中删除。它向左或向右移动，直到接触其包含框的边缘。因此，当列高不均匀时，正确的行为是将它们堆叠到最近的一侧。

注：以下选项适用于列包装的情况，其中有在一个超过12个山坳单位.row。对于不了解为什么连续超过12个列的读者，或者认为解决方案是“使用单独的行” ，请先阅读此内容

有几种方法可以解决此问题。.（于2018年更新）

1-这样的“ clearfix”方法（由Bootstrap推荐）（每次都需要迭代）X列）。这将强制每X列换行...

<div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="clearfix"></div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="clearfix"></div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
</div>

Clearfix演示（单层）

Clearfix演示（响应层） -例如col-sm-6 col-md-4 col-lg-3

表的“ clearfix”纯CSS clearfix也只有CSS的变体

由于问题是由高度差异引起的，因此可以使每一行的列高度相等。Flexbox是执行此操作的最佳方法，并且Bootstrap 4本身支持它。

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

Flexbox等高演示

同样，仅由于列是浮动的，所以会出现高度问题。另一种选择是将列设置为display:inline-block和float:none。这也为垂直对齐提供了更大的灵活性。但是，使用此解决方案，columns之间必须没有HTML空格，否则inline-block元素将具有额外的空间，并且会过早地换行。

内联块修复演示

4-CSS3列方法（类似于砌体/ Pinterest的解决方案）。

这不是Bootstrap 3的本机，而是使用CSS多列的另一种方法。这种方法的缺点是列顺序是从上到下而不是从左到右。Bootstrap 4包括以下类型的解决方案： Bootstrap 4 Masonry卡Demo。

Bootstrap 3多列演示

5-石工JavaScript / jQuery方法

最后，您可能要使用诸如Isotope / Masonry之类的插件：

引导砌体演示
砌体演示2

有关Bootstrap可变高度列的更多信息

Update 2018 Bootstrap 4中
所有列的高度均相等，因为默认情况下它使用flexbox，因此“高度问题”不是问题。另外，Bootstrap 4包括这种类型的多列解决方案： Bootstrap 4 Masonry卡Demo。

由于某种原因，这对我没有.display-flex类有效

.row {
    display: flex;
    flex-wrap: wrap;
}
.row > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

我为引导程序行创建了另一个扩展名（也是反应性的）。您可以尝试如下操作：

.row.flexRow { display: flex; flex-wrap: wrap;}