每次我遇到这个问题都会感到挣扎，而且我还没有找到解决方案，这让我的生活更轻松。我的布局很简单，14个盒子并排。我在框上使用col-sm-12类（我的引导程序配置为24列）。但是盒子里面的内容各不相同，所以它们的高度不一样，而且盒子越大，推送就越多。紧接着那些盒子。非常直接的解决方案是在每两个框之后使用一行，但这里是捕获，框是由循环生成的！我可以设置一个min-height，但在移动设备上看起来并不漂亮（景观上的空间太大）。我不确定浏览器对flexbox的支持。
我可能会使用其他任何黑客攻击吗？
HTML
<div class="row">
<div class=" col-xs-24 col-sm-12 col-md-12 blocks"><!--the loop starts from here-->
<div class="row">
<div class="col-sm-8"> some content</div>
<div class="col-sm-16">some more content that changes height. you can put some lorem isum in here. </div>
</div>
<!--my loop, aka, blocks, end here-->
</div>
</div>
答案 0 :(得分：1)
flex是你的解决方案，真的 - 当涉及到相同高度的列/盒时：flex它 - 并让浏览器进行计算和所有“繁重的工作”。
.wrapper {
display: block;
max-width: 500px;
margin: 30px auto;
}
.flex-row {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.flex-row div[class*="col-sm"] {
background: #ddd;
padding: 10px;
box-sizing: border-box;
flex: 0 1 45%;
}<head>
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<div class="wrapper">
<div class=" col-xs-24 col-sm-12 col-md-12 blocks"><!--the loop starts from here-->
<div class="row flex-row">
<div class="col-sm-8"> some content</div>
<div class="col-sm-16">some more content that changes height. you can put some lorem isum in here. </div>
</div>
<!--my loop, aka, blocks, end here-->
</div>
</div>
<强>支持
就浏览器支持而言，flex现在通常得到很好的支持 - 除了Safari浏览器 - 尽管caniuse.com说了些什么。
否则，不支持IE 8或9（但实际上并不奇怪），IE 10支持较旧版本的语法（从2011年开始），并且部分支持IE 11。 有较旧的webkit浏览器（Firefox和Safari）支持更老版本的语法（从2009年开始） - 您需要支持Flexbox遗留的这些浏览器的回退规则（例如：2009语法，2011混合语法和浏览器前缀） ）。
Advanced Cross-browser Flexbox
但是，如果你坚持要避免flex，那么你将不得不用表格来解决，或者放弃等高柱的想法并坚持使用通用的inline-block元素。
答案 1 :(得分：0)
如果您不确定使用flexbox，因为不支持IE10及以下版本，您可以使用CSS表格
请注意，我使用标准的12列进行演示。
.blocks > .row {
display: table
}
.blocks .row > [class*="col"] {
display: table-cell;
background: red;
float:none /* override the float:left from bootstrap.css */
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class=" col-xs-12 col-sm-12 col-md-12 blocks">
<!--the loop starts from here-->
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4">some content</div>
<div class="col-xs-8 col-sm-8 col-md-8">some more content that changes height. you can put some lorem isum in here.</div>
</div>
<!--my loop, aka, blocks, end here-->
</div>
</div>
</div>
更新，根据以下评论中的OP请求
这是使用CSS表格的另一个版本，但由于处于循环中，OP无法添加HTML标记。
因此，给定标记的一种更简单的方法是在每个4项清空左侧
.row{
margin:15px auto;
}
.block{
background:black;
color:white;
border:1px solid white;
padding:15px 5px;
}
.block h4{
color: pink;
text-decoration:underline;
}
.block:nth-of-type(3n+1) {
clear:left
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-4 block">
<!--lets assume this coloumn is on the loop-->
<h4>this is a small paragraph</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet tortor pretium quam dapibus maximus nec quis dolor. Mauris non auctor eros. In hac habitasse platea dictumst. </p>
</div>
<div class="col-sm-4 block">
<!--lets assume this coloumn is on the loop-->
<h4>this is another small paragraph</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet tortor pretium quam dapibus maximus nec quis dolor. Mauris non auctor eros. In hac habitasse platea dictumst. </p>
</div>
<div class="col-sm-4 block">
<!--lets assume this coloumn is on the loop-->
<h4>wow! small paragraph</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet tortor pretium quam dapibus maximus nec quis dolor. Mauris non auctor eros. In hac habitasse platea dictumst. </p>
</div>
<div class="col-sm-4 block">
<!--lets assume this coloumn is on the loop-->
<h4>again small paragraph!</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet tortor pretium quam dapibus maximus nec quis dolor. Mauris non auctor eros. In hac habitasse platea dictumst. </p>
</div>
<div class="col-sm-4 block">
<!--lets assume this coloumn is on the loop-->
<h4>Now we get a big one!</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet tortor pretium quam dapibus maximus nec quis dolor. Mauris non auctor eros. In hac habitasse platea dictumst. Curabitur imperdiet, leo vitae accumsan lobortis, ligula mauris pretium turpis, a feugiat ligula ex sit amet tortor. In tempor, purus id faucibus laoreet, nisi risus volutpat justo, id finibus ligula magna id libero. Nunc orci tellus, consequat vitae nibh vel, fermentum aliquet ex. Integer laoreet rhoncus leo nec ultricies. Nam feugiat quam nec odio interdum dignissim. </p>
</div>
<div class="col-sm-4 block">
<!--lets assume this coloumn is on the loop-->
<h4>Lets add more small paragraphs</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet tortor pretium quam dapibus maximus nec quis dolor. Mauris non auctor eros. In hac habitasse platea dictumst. </p>
</div>
<div class="col-sm-4 block">
<!--lets assume this coloumn is on the loop-->
<h4>again small paragraph no 2!</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet tortor pretium quam dapibus maximus nec quis dolor. Mauris non auctor eros. In hac habitasse platea dictumst. </p>
</div>
<div class="col-sm-4 block">
<!--lets assume this coloumn is on the loop-->
<h4>And this is small paragraph no 3!</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet tortor pretium quam dapibus maximus nec quis dolor. Mauris non auctor eros. In hac habitasse platea dictumst. </p>
</div>
<div class="col-sm-4 block">
<!--lets assume this coloumn is on the loop-->
<h4>And this is small paragraph no 4!</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet tortor pretium quam dapibus maximus nec quis dolor. Mauris non auctor eros. In hac habitasse platea dictumst. </p>
</div>
</div>
</div>