Html 具有不同高度的列的 Bootstrap 行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22310912/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap row with columns of different height
提问by user3379926
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, contentwas 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.
现在假设，content是不同高度的盒子，具有相同的宽度 - 我怎么能保持相同的“基于网格的布局”并且让所有的盒子相互排列，而不是完美的线条。
Currently TWBS will place the next line of col-md-4under 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放在前第三行中最长元素的下方，因此每行项目都完美对齐 - 虽然这很棒，但我希望每个项目都直接位于最后一个元素下方（“砌体”布局)
回答by Zim
This is a popular Bootstrap question, so I've updatedand 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 wrappingscenarioswhere 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
注：以下选项适用于列包装的情况，其中有在一个超过12个山坳单位.row。对于不明白为什么连续会有超过 12 个列的读者，或者认为解决方案是“使用单独的行”的读者应该先阅读这个
There are a few ways to fix this..(updated for 2018)
有几种方法可以解决这个问题..（2018 年更新）
1 - The 'clearfix' approach(recommended by Bootstrap) like this (requires iteration every Xcolumns). This will force a wrap every Xnumber 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 (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 variationof the 'clearfix'
CSS-only clearfix with tables
还有一个只有 CSS 的变体，它是“clearfix”的
CSS-only clearfix with tables
2 - Make the columns the same height (using flexbox):2 - 使列的高度相同（使用 flexbox）：
Since the issue is caused by the differencein height, you can make columns equalheight 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;
}
3 - Un-float the columns an use inline-block instead..3 - 取消浮动列并使用内联块代替..
Again, the height problem only occurs because the columns are floated. Another option is to set the columns to display:inline-blockand 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 spaceand will wrap prematurely.
同样，高度问题只是因为列是浮动的。另一种选择是将列设置为display:inline-block和float:none。这也为垂直对齐提供了更大的灵活性。但是，使用此解决方案时，列之间不能有 HTML 空格，否则内联块元素有额外的空间并且会过早换行。
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 Masonrycards Demo.
这不是 Bootstrap 3 原生的，而是另一种使用CSS multi-columns 的方法。这种方法的一个缺点是列顺序是从上到下而不是从左到右。Bootstrap 4 包括这种类型的解决方案： Bootstrap 4 Masonry卡演示。
Bootstrap 3 multi-columns Demo
5 - Masonry JavaScript/jQuery approach
5 - 砌体 JavaScript/jQuery 方法
Finally, you may want to use a plugin such as Isotope/Masonry:
最后，您可能想要使用诸如 Isotope/Masonry 之类的插件：
Bootstrap Masonry Demo
Masonry Demo 2
More on Bootstrap Variable Height Columns
Update 2018
All columns are equal height in Bootstrap 4because 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 card Demo。
回答by Steve Whitby
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;
}
回答by Akash Yellappa
I created another extension (which also is reactive) to the bootstrap row. You can try something like this:
我为引导行创建了另一个扩展（也是反应性的）。你可以尝试这样的事情：
.row.flexRow { display: flex; flex-wrap: wrap;}
.row.flexRow { display: flex; flex-wrap: wrap;}
