25

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

使用 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，调用了前面提到的库。

感谢您的任何帮助/建议

4

3 回答 3

22

您可以尝试使用 CSS 负边距（不需要 jQuery）..

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

#equalheight {
    overflow: hidden; 
}

http://bootply.com/92230

编辑 - 另一种选择

这是使用 CSS3flexbox规范的另一个示例：http: //www.bootply.com/126437

于 2013-11-06T18:50:02.853 回答
5

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

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

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

于 2015-04-29T11:00:08.327 回答
1

你可以使用这个插件。它工作得很好。

于 2014-11-25T01:24:00.080 回答