twitter-bootstrap 具有不同高度的 Bootstrap 流体行列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24973275/
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 fluid row columns with different height
提问by K. D.
Dynamically I create a set of boxes with slightly different height and want to appear 2, 3 or 4 of them (depending on the screen size) at the same row. I tried the following markup with bootstrap:
我动态地创建了一组高度略有不同的框，并希望在同一行显示其中的 2、3 或 4 个（取决于屏幕大小）。我用引导程序尝试了以下标记：
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-6">
Two<br>Lines
</div>
<div class="col-xs-6">
Two<br>Lines
</div>
<div class="col-xs-6" style="background-color: red">
Three<br>Lines<br>Jup
</div>
<div class="col-xs-6">
Two<br>Lines
</div>
<div class="col-xs-6">
Two<br>Lines
</div>
<div class="col-xs-6">
Two<br>Lines
</div>
</div>
</div>
My problem is the space below my third column.
我的问题是我的第三列下方的空间。
A B
C D
C E <- Should wrap to next row, because of C
F G
Can you tell how to achieve this? I recognized the advice to use a clearfix but I guess this attempt will cause problems and ugly code when using a different count of columns.
你能说出如何实现这一目标吗？我认识到使用 clearfix 的建议，但我想这种尝试在使用不同的列数时会导致问题和难看的代码。
Thanks for your answers.
感谢您的回答。
回答by KyleMit
The problem
问题
The problem is that all bootstrap columns try to float left.
问题是所有引导列都试图向左浮动。
From MDN on floats:
when an element is floated it is 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 or another floated element.
当一个元素被浮动时，它被从文档的正常流中取出。它向左或向右移动，直到接触到它的包含框或另一个浮动元素的边缘。
So when you have uneven heighted elements, the correct behavior is to stack them to the side.
因此，当您有高度不均匀的元素时，正确的行为是将它们堆叠到一边。
Luckily, there are a lot of way to correct this to the anticipated behavior:
幸运的是，有很多方法可以将其纠正为预期行为：
Using CSS Clear property
使用 CSS 清除属性
From MDN on Clear:
从MDN 上清除：
The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them
clear CSS 属性指定一个元素是可以在它前面的浮动元素旁边还是必须向下移动（清除）在它们下面
For this exact structure, you can apply clearto every other row using the nth-child selector:
对于这个确切的结构，您可以clear使用nth-child 选择器应用于其他每一行：
.col-xs-6:nth-child(odd) {
clear: both;
}
Note: The nth-child selector won't work in IE8
Demo in jsFiddle/ Stack Snippets:
jsFiddle/ Stack Snippets 中的演示：
.col-xs-6:nth-child(odd) {
clear: left;
}
.col-xs-6 {
border: 1px solid grey;
}<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-xs-6">
Two<br/>
Lines
</div>
<div class="col-xs-6">
Two<br/>
Lines
</div>
<div class="col-xs-6 label-warning">
Three<br/>
Lines<br/>
Jump
</div>
<div class="col-xs-6">
Two<br/>
Lines
</div>
<div class="col-xs-6">
Two<br/>
Lines
</div>
<div class="col-xs-6">
Two<br/>
Lines
</div>
</div>
</div>Using .clearfix
使用 .clearfix
The Bootstrap way to do thisis to use the clearfix class which applies the following styles:
执行此操作的Bootstrap 方法是使用应用以下样式的 clearfix 类：
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
Note: You can use selectively target different screen sizes by combining this with the responsive utility classes(i.e.
.visible-*-*,.hidden-*)
注意：您可以使用选择性地与这个合并目标不同尺寸的屏幕响应实用工具类（即
.visible-*-*，.hidden-*）
Demo in jsFiddle/ Stack Snippets:
jsFiddle/ Stack Snippets 中的演示：
.col-xs-6 {
border: 1px solid grey;
}<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-xs-6">
Two<br/>
Lines
</div>
<div class="col-xs-6">
Two<br/>
Lines
</div>
<div class="clearfix"></div>
<div class="col-xs-6 label-warning">
Three<br/>
Lines<br/>
Jump
</div>
<div class="col-xs-6">
Two<br/>
Lines
</div>
<div class="clearfix"></div>
<div class="col-xs-6">
Two<br/>
Lines
</div>
<div class="col-xs-6">
Two<br/>
Lines
</div>
</div>
</div>Using .row
使用 .row
You can also just wrap every pair of columns into a new row. This is the least reusable, but if every set of items forms a logical group, it does create semantic markup.
您也可以将每对列包装成一个新行。这是最不可重用的，但如果每组项目形成一个逻辑组，它确实会创建语义标记。
Demo in jsFiddle/ Stack Snippets:
jsFiddle/ Stack Snippets 中的演示：
.col-xs-6 {
border: 1px solid grey;
}<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-xs-6">
Two<br/>
Lines
</div>
<div class="col-xs-6">
Two<br/>
Lines
</div>
</div>
<div class="row">
<div class="col-xs-6 label-warning">
Three<br/>
Lines<br/>
Jump
</div>
<div class="col-xs-6">
Two<br/>
Lines
</div>
</div>
<div class="row">
<div class="col-xs-6">
Two<br/>
Lines
</div>
<div class="col-xs-6">
Two<br/>
Lines
</div>
</div>
</div>Fixing the height
固定高度
Depending on your use case, you might just benefit from making everything the same height. This would work well if you had similar content in every column and wanted a consistent looking grid.
根据您的用例，您可能会从使所有东西都相同的高度中受益。如果您在每一列中都有相似的内容并且想要一个外观一致的网格，这将很有效。
.col-xs-6 {
height: 7rem;
}
Demo in jsFiddle/ Stack Snippets:
jsFiddle/ Stack Snippets 中的演示：
.col-xs-6 {
height: 7rem;
}
.col-xs-6 {
border: 1px solid grey;
}<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-xs-6">
Two<br/>
Lines
</div>
<div class="col-xs-6">
Two<br/>
Lines
</div>
<div class="col-xs-6 label-warning">
Three<br/>
Lines<br/>
Jump
</div>
<div class="col-xs-6">
Two<br/>
Lines
</div>
<div class="col-xs-6">
Two<br/>
Lines
</div>
<div class="col-xs-6">
Two<br/>
Lines
</div>
</div>
</div>