<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>
我的问题是我的第三列之下的空格.
A B C D C E <- Should wrap to next row,because of C F G
你可以告诉如何实现这一点吗？我认识到使用clearfix的建议,但我猜这个尝试会导致问题和丑的代码,当使用不同的列数.
感谢您的答案.
解决方法
问题是所有引导列试图向左浮动.
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.
所以当你有不均匀的高度元素,正确的行为是将它们堆叠在一边.
幸运的是,有很多方法来纠正这个预期的行为：
使用CSS清除属性
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
对于这个确切的结构,您可以使用nth-child selector对每个其他行应用清楚：
.col-xs-6:nth-child(odd) {
clear: both;
}
Note: The 07003
演示jsFiddle /堆栈片段：
.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>
使用.clearfix
Bootstrap way to do this是使用clearfix类,其中applies the following styles：
.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 07007 (i.e.
.visible-*-*,.hidden-*)
演示jsFiddle /堆栈片段：
.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>
使用.row
您也可以将每一列的列包裹到一个新行.这是最少可重用的,但是如果每一组项目形成一个逻辑组,它都会创建语义标记.
演示jsFiddle /堆栈片段：
.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>
固定高度
根据你的用例,你可能只是受益于使一切都相同的高度.如果您在每个列中都有类似的内容,并且希望有一个一致的网格,这将很好地工作.
.col-xs-6 {
height: 7rem;
}
演示在jsFiddle /堆栈片段：
.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>
