Bootstrap行与不同高度的列

I currently have something like:

我目前有类似的东西：

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

Now assuming that, content was boxes of different height, with all the same width - how could I keep the same "grid based layout" and yet have all the boxes line up under each other, instead of in perfect lines.

现在假设，内容是不同高度的盒子，具有相同的宽度 - 我怎么能保持相同的“基于网格的布局”，并且所有盒子彼此排列，而不是完美的线条。

Currently TWBS will place the next line of col-md-4 under the longest element in the previous third row., thus each row of items is perfectly aligned an clean - while this is awesome I want each item to fall directly under the last element ("Masonry" layout)

目前TWBS将下一行col-md-4置于前一行中最长的元素下，因此每行项目完全对齐干净 - 虽然这很棒但是我希望每个项目都直接落在最后一个元素之下（“砌体”布局）

3 个解决方案

#1

This is a popular Bootstrap question, so I've updated and expanded the answer for Bootstrap 3 and Bootstrap 4...

这是一个流行的Bootstrap问题，所以我更新并扩展了Bootstrap 3和Bootstrap 4的答案......

The Bootstrap 3 "height problem" occurs because the columns use float:left. When a column is “floated” it’s taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of its containing box. So, when you have uneven column heights, the correct behavior is to stack them to the closest side.

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

Note: The options below are applicable for column wrapping scenarios where there are more than 12 col units in a single .row. For readers that don't understand why there would ever be more than 12 cols in a row, or think the solution is to "use separate rows" should read this first

注意：以下选项适用于列包装方案，其中单个.row中的col单元数超过12个。对于那些不理解为什么连续超过12个cols的读者，或者认为解决方案是“使用单独的行”的读者应首先阅读

There are a few ways to fix this.. (updated for 2018)

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

1 - The 'clearfix' approach (recommended by Bootstrap) like this (requires iteration every X columns). This will force a wrap every X number of columns...

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 Demo (single tier)

Clearfix演示（单层）

Clearfix Demo (responsive tiers) - eg. col-sm-6 col-md-4 col-lg-3

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

There is also a CSS-only variation of the 'clearfix'
CSS-only clearfix with tables

还有一个仅用于CSS的'clearfix'CSS-only clearfix与表的变体

2 - Make the columns the same height (using flexbox):

Since the issue is caused by the difference in height, you can make columns equal height across each row. Flexbox is the best way to do this, and is natively supported in Bootstrap 4...

由于问题是由高度差异引起的，因此可以使每列的列高度相等。 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

Flexbox等高度演示

3 - Un-float the columns an use inline-block instead..

Again, the height problem only occurs because the columns are floated. Another option is to set the columns to display:inline-block and float:none. This also provides more flexibility for vertical-alignment. However, with this solution there must be no HTML whitespace between columns, otherwise the inline-block elements have additional space and will wrap prematurely.

同样，仅出现高度问题，因为列是浮动的。另一个选项是设置要显示的列：inline-block和float：none。这也为垂直对齐提供了更大的灵活性。但是，使用此解决方案，列之间必须没有HTML空格，否则内联块元素会有额外的空间并且会过早地换行。

Demo of inline block fix

内联块修复演示

4 - CSS3 columns approach (Masonry/Pinterest like solution)..

4 - CSS3列方法（Masonry / Pinterest喜欢解决方案）..

This is not native to Bootstrap 3, but another approach using CSS multi-columns. One downside to this approach is the column order is top-to-bottom instead of left-to-right. Bootstrap 4 includes this type of solution: Bootstrap 4 Masonry cards Demo.

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

Bootstrap 3 multi-columns Demo

Bootstrap 3多列演示

5 - Masonry JavaScript/jQuery approach

5 - Masonry JavaScript / jQuery方法

Finally, you may want to use a plugin such as Isotope/Masonry:

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

Bootstrap Masonry Demo
Masonry Demo 2

Bootstrap Masonry Demo Masonry Demo 2

More on Bootstrap Variable Height Columns

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

Update 2018
All columns are equal height in Bootstrap 4 because it uses flexbox by default, so the "height issue" is not a problem. Additionally, Bootstrap 4 includes this type of multi-columns solution: Bootstrap 4 Masonry cards Demo.

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

#2

For some reason this worked for me without the .display-flex class

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

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

#3

The col's sum inside the twitter bootsrap should be everytime 12. This will keep a clean grid design:

twitter boots中的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>

#1