Bootstrap 3>尝试创建具有相同高度的列

我刚刚开始学习,所以请坚持我,我会尝试提供尽可能多的信息。

使用Bootstrap 3我一直试图调整一些内容区域,使它们具有相同的高度。 我每行有4个具有未指定数量的列(我正在循环通过php数组来确定这一点)。 基本上无论我需要显示多少内容区域,它们都应该使用相同的高度,或者至少与它上面的其他三个高度相同。

我一直在使用这个jquery库> https://github.com/mattbanks/jQuery.equalHeights >效果很好但是每当我调整页面大小时,内容区域的高度都不会更新(如果我将屏幕拖动到新的大小和命中刷新高度重新调整到正确的位置)

我还查看了一些其他解决方案,例如> Twitter Bootstrap – 流体列的相同高度,但是当我调整多行时,这似乎不起作用。

任何帮助将不胜感激,无论我是应该使用JavaScript解决方案还是我可以使用CSS做什么。 记住它我需要高度一致,并在屏幕resize时重新调整。 我更喜欢使用Bootstrap 3,但如果解决方案可用于2,我将使用该版本。

one line of copy

lots and lots of copy lots and lots of copy lots and lots of copy lots and lots of copy

one line of copy

one line of copy

以上是我的html,第二个内容区域有大量的副本

  $('#equalheight div').equalHeights();   $(window).resize(function(){ $('#equalheight div').equalHeights(); }); $(window).resize();  

上面是我的Javascript,调用前面提到的库。

感谢您的帮助/建议

你可以尝试使用CSS负边距(不需要jQuery)..

 .demo{ margin-bottom: -99999px; padding-bottom: 99999px; background-color:#efefef; } #equalheight { overflow: hidden; } 

http://bootply.com/92230

编辑 – 另一种选择

这是使用CSS3 flexbox规范的另一个例子: http : //www.bootply.com/126437

Bootstrap团队开发了一个CSS类.row-eq-height ,这正是你所需要的。 请看这里了解更多。 只需在当前行上添加此类,如下所示:

  
your columns

警告:您必须每12列添加一个新的div.row.row-eq-height

你可以使用这个插件 。 它的效果非常好。