Bootstrap 3 > 尝试创建高度相等的列

Posted

技术标签:

【中文标题】Bootstrap 3 > 尝试创建高度相等的列【英文标题】:Bootstrap 3 > trying to create columns with equal heights 【发布时间】:2013-11-18 03:31:09 【问题描述】:

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

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

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

我还查看了其他一些解决方案,例如 > Twitter Bootstrap - Same heights on fluid columns,但是当我针对多行进行调整时,这似乎不起作用。

任何帮助都将不胜感激,无论我应该使用 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,调用前面提到的库。

感谢您的任何帮助/建议

【问题讨论】:

***.com/questions/19695784/… 这无济于事,因为那只做一行。我有多行正在生成,我只能使用 1 行。下面有一个来自 Skelly 的示例 - 但这涉及创建一个新的行 div 标签。我也想避免这种情况。 ***.com/questions/24745966/… 【参考方案1】:

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

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

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

【讨论】:

row-eq-height 不是官方的 Bootstrap 类。它来自第 3 方维护的项目。【参考方案2】:

您可以使用this plugin。效果不错。

【讨论】:

【参考方案3】:

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

【讨论】:

在上面的示例中,它涉及每 4 次创建一个新行,有没有一种方法可以使用上面的示例而不创建一个新行?只是我不知道会有多少行,所以我需要根据我的 php 数组进行计数以确定新行何时开始 - 如果我在移动视图上,它会下降到 2 行.只是看起来很啰嗦。 你的意思是这样吗? bootply.com/92232 然后每个网格行将是它的最高单元格的高度。 这是两者的结合。因此,在您的第一个示例中,您每 4 个内容块创建一行 - 看起来是正确的,但我不想每 4 个块创建新的 div 行第二个示例不显示我想要的内容它,但是在语法方面它很棒,因为我不必添加新的行 div。我不想每 4 个内容块做一个新的行 div,因为在较低的屏幕分辨率上我可能只显示两个块。这有意义吗? 只是添加另一个评论,我已经使用了第一个示例,它很好。我遇到的唯一问题是,因为我是从 php 循环中动态生成这些框,所以我还必须动态添加行 div,我希望有办法解决它。 很好......很高兴你能弄明白。

以上是关于Bootstrap 3 > 尝试创建高度相等的列的主要内容,如果未能解决你的问题,请参考以下文章

Bootstrap 网格系统 - 如何使两列高度相等? [复制]

如何在我的 Bootstrap flex 子元素中具有相等的高度?

每行所有列的高度相等

React-Bootstrap <Row> 高度不正确

如何使 Bootstrap 4 列的高度都相同? [复制]

Bootstrap 搜索字形图标高度