Bootstrap 3>试图创建相等高度的列 [英] Bootstrap 3 > trying to create columns with equal heights

问题描述

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

使用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>一行副本< / 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>批次和许多复制批次和许多复制批次和许多复制批次和许多复制< / 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>一行副本< / 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>一行副本< / p> 
< / div> 
< / div> 
 
< / div> 
< / div> 
  

第二内容区域具有大量的副本

 < script> 
 $（'＃equalheight div'）。equalsHeights（）; 
< / script> 
 
< script> 
 $（window）.resize（function（）{
 $（'＃equalheight div'）。equalsHeights（）; 
}）; 
 $（window）.resize（）; 
< / script> 
  

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

感谢任何帮助/建议

解决方案

您可以尝试使用CSS负边距

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

http://bootply.com/92230

EDIT - 另一个选项

这是另一个使用CSS3 flexbox spec： http://www.bootply.com/126437

I've only just started learning so please stick with me and I'll try provide as much info as I can.

Using Bootstrap 3 I have been attempting to adjust a number of content areas so that they have the same height. I have 4 per row with an unspecified amount of columns (I'm looping through a php array to determine this). Essentially no matter how many content areas I need to display they should all use the same height, or at the very least the same height as the other three on it's row.

I have been using this jquery library > https://github.com/mattbanks/jQuery.equalHeights > which works great but whenever I resize the page the heights of the content areas don't update (if I drag the screen to a new size and hit refresh the heights re-adjust to the correct position)

I have also looked at a few other solutions such as > Twitter Bootstrap - Same heights on fluid columns but this doesn't seem to work when I adjust it for multiple rows.

Any help would be appreciated, whether I should be using a javascript solution or if there's anything I can be doing with CSS. Keeping it mind I need the heights to be consistent and for it to re-adjust on screen resize. I would prefer to use Bootstrap 3, but if a solution is available for 2 I will use that version.

<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>

Above is my html, the second content area has the large amount of copy

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

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

Above is my Javascript, calling the before mentioned library.

Thanks for any help / advice

解决方案

You can try using CSS negative margins (no jQuery needed)..

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

#equalheight {
    overflow: hidden; 
}

http://bootply.com/92230

EDIT - another option

Here is another example using CSS3 flexbox spec: http://www.bootply.com/126437

这篇关于Bootstrap 3>试图创建相等高度的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！