引导行与不同高度的列
我目前有这样的东西：
<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的下一行放在前一行第三行中最长的元素下面，因此每一行项目都是完全alignment的，而这很棒，我希望每个项目都直接落在最后一个元素的下面
这是一个受欢迎的Bootstrap问题，所以我已经更新并扩展了答案。
Bootstrap“ 高度问题 ”是因为列使用float:left 。 当一个列被“浮动”时，它被从文档的正常stream程中取出。 它向左或向右移动，直到碰到包含盒子的边缘。 所以，当你的柱高不一样时 ，正确的行为就是把它们堆叠到最近的一边。
注意 ：下面的选项适用于单个.row中有多于12个col单元的 列封装场景 。 对于不明白为什么连续超过12列的读者，或者认为解决scheme是“使用单独的行”
有几种方法可以解决这个问题 （2017年更新）
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演示（单层）
Clearfix Demo（响应层） – 例如。 col-sm-6 col-md-4 col-lg-3
还有一个CSS的唯一变化的“清晰”
仅含CSS的纯表格
2 – 使列高度相同（使用flexbox）：
由于问题是由高度差异引起的，因此可以使每列的列高度相等 。 Flexbox是做到这一点的最佳方式，并且在Bootstrap 4中本地支持 …
.row.display-flex { display: flex; flex-wrap: wrap; } .row.display-flex > [class*='col-'] { display: flex; flex-direction: column; }
Flexbox等高度演示
3 – 取消浮动列使用内联块代替..
同样，高度问题只发生，因为列浮动。 另一个选项是将列设置为display:inline-block和float:none 。 这也为垂直alignment提供了更多的灵活性。 但是，使用这种解决scheme，列之间不能有空格 ，否则内联块元素会有额外的空间，并且会过早地换行。
内联块修复演示
4 – CSS3列方法（类似CSS的CSS解决scheme）
这不是Bootstrap 3的本地特性，而是另一种使用CSS多列的方法 。 这种方法的一个缺点是列顺序是从上到下而不是从左到右。 Bootstrap 4将包括这种types的解决scheme： Bootstrap 4 Masonry Cards Demo 。
Bootstrap 3多栏演示
5 – 砌体JavaScript / jQuery方法
最后，你可能想使用一个插件，如同位素/砌体： 
Bootstrap砌体演示
砌体演示2
有关Bootstrapvariables高度列的更多信息
在twitter靴子内的col的总和应该是每12次。这将保持一个干净的网格devise：
<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>
出于某种原因，这对我没有.display-flex类的工作
.row { display: flex; flex-wrap: wrap; } .row > [class*='col-'] { display: flex; flex-direction: column; }
