Bootstrap行与不同高度的列

Question

我目前有类似的东西：

<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置于前一行第三行的最长元素下，因此每行项目完全对齐干净 - 虽然这很棒但我希望每个项目直接落在最后一个元素（“砌体”布局）

Answer 1

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

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

注意：以下选项适用于单.row 中超过12个col单位的column wrapping scenarios。对于那些不理解为什么连续超过12列的读者，或认为解决方案是“使用单独的行”should read this first

---

有几种方法可以解决这个问题.. （2018年更新）

1 - 'clearfix'方法（recommended by 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 Demo (single tier)

Clearfix Demo (responsive tiers) - 例如。 col-sm-6 col-md-4 col-lg-3

还有CSS-only variation'clearfix' CSS-only clearfix with tables

<小时/> 2 - 使列具有相同的高度（使用flexbox）：

由于问题是由高度中的差异引起的，因此您可以在每行中使列等于高度。 Flexbox是执行此操作的最佳方式，并且在Bootstrap 4中本机支持 ...

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

Flexbox equal height Demo

<小时/> 3 - 使用内联块取消浮动列而不是..

同样，高度问题只会发生，因为列是浮动的。另一种方法是将列设置为display:inline-block和float:none。这也为垂直对齐提供了更大的灵活性。但是，使用此解决方案时，列之间必须没有HTML空格，否则inline-block elements have additional space会过早地换行。

Demo of inline block fix

---

4 - CSS3列方法（Masonry / Pinterest就像解决方案一样）..

这不是Bootstrap 3的原生，而是另一种使用CSS multi-columns的方法。这种方法的一个缺点是列顺序是从上到下而不是从左到右。 Bootstrap 4包含此类型 溶液： Bootstrap 4 Masonry cards Demo

Bootstrap 3 multi-columns Demo

5 - Masonry JavaScript / jQuery方法

最后，您可能想要使用Isotope / Masonry这样的插件：

Bootstrap Masonry Demo
Masonry Demo 2

---

More on Bootstrap Variable Height Columns

---

更新2018年
所有列在 Bootstrap 4 中都是相同的高度，因为它默认使用flexbox，因此“高度问题”不是问题。此外，Bootstrap 4包括这种类型的多列解决方案： Bootstrap 4 Masonry cards Demo

Answer 2

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

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

Answer 3

我为引导程序行创建了另一个扩展名（也是反应性的）。您可以尝试这样的事情：

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

Answer 4

twitter bootstrap中的col的总和应该是每次12。这将保持一个干净的网格设计：

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