Bootstrap网格列清除

我很难理解bootstrap中的列clearfix结构。 我正在尝试创建一个卡片布局，它需要布局中的行都具有相同的高度，但每个条目中的内容不一定相同。 你可以看到我在这里做的一个例子： https ： //demo.eap.soa.com/content/test/staticapps.html

部分困难在于我使用车把模板来制作内容：

 
 {{#each apps}} 
 
{{title}}
 
{{description}}
 
 {{/each}} 
  

因此，每X个条目插入一个空的清除div并不容易，或者甚至必须知道X应该是什么。

我可以通过在col-md-4类上使用min-height来破解它，但这看起来非常难看。

这里有什么想法？

谢谢。

Answer 1

我不知道这个答案是否可以帮到你。

正如你所说，你的div内容已经在改变，所以一种方法是在文档准备就绪时询问javascript。

只需要检查每个目标div的最大高度，并将其应用于每个div。

这是一种行动代码： http ： //bootply.com/103561

就是这样，我很抱歉，因为当我编写代码时，我在云中，而var mini没有意义，它应该被命名为’ maxi ‘…

这个相同的代码在visu中：

 $(document).ready( makeDivSimilar ); function makeDivSimilar() { var mini = 0; $('.col-md-4').each(function(){ if(parseInt($(this).css('height')) > mini ) { mini = parseInt($(this).css('height')); } }); $('.col-md-4').css('height',mini); }