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

Question

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

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

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

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

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

<div class = "container">
<div class="row">
    <div id="equalheight">      

        <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
            <div class="info-block"><!-- BODY BOX-->
                <p>one line of copy</p>
            </div>
        </div>  

        <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
            <div class="info-block"><!-- BODY BOX-->
                <p>lots and lots of copy lots and lots of copy lots and lots of copy lots and lots of copy</p>
            </div>
        </div>  

        <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
            <div class="info-block"><!-- BODY BOX-->
                <p>one line of copy</p>
            </div>
        </div>  

        <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
            <div class="info-block"><!-- BODY BOX-->
                <p>one line of copy</p>
            </div>
        </div>              

    </div>
</div>

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

<script>
    $('#equalheight div').equalHeights();
</script>

<script>
    $(window).resize(function(){
       $('#equalheight div').equalHeights(); 
    });
    $(window).resize();
</script>   

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

感谢您提供任何帮助/建议

Answer 1

你可以尝试使用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

Answer 2

Bootstrap 团队开发了一个 CSS 类.row-eq-height，这正是您所需要的。请参阅此处了解更多信息。只需将此类添加到当前行，如下所示：

 <div class="row row-eq-height">
    your columns
 </div>

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