Bootstrap 3 > 尝试创建等高列

Question

我刚开始学习，请耐心等待我的回答，我会尽力提供尽可能多的信息。

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

谢谢任何帮助/建议。

- Ryan Michael

---

https://dev59.com/tWIj5IYBdhLWcg3w_5vl - Trevor

那并没有帮助，因为它只适用于一行。我有多行正在生成，我只能让它在一行上工作。下面是Skelly的一个示例，但这涉及创建一个新的行div标签。我也想避免这种情况。 - Ryan Michael

http://stackoverflow.com/questions/24745966/twitter-bootstrap-responsive-block-heights/ - trante

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

- Zim

---

在上面的例子中，它涉及每4个创建一个新行，有没有一种方法可以在不创建新行的情况下使用上面的例子？只是我不知道会有多少行，所以我需要计算来确定基于我的php数组何时开始新行 - 如果我处于移动视图，则每行变为2。这似乎很冗长。 - Ryan Michael

你的意思是这样吗？http://bootply.com/92232 然后每个网格行的高度将是其最高单元格的高度。 - Carol Skelly

这是两者的结合。所以在你的第一个例子中，你每4个内容块创建一行 - 这样看起来是正确的，但我不想每4个块都创建新的div行。第二个例子显示的内容不是我想要的，但从语法上讲很好，因为我不必添加新的行div。我不想每4个内容块就创建一个新的行div，因为在较低的屏幕分辨率下，我可能只显示两个块。这有意义吗？ - Ryan Michael

只是再添加一条评论，我已经使用了第一个示例，它很好。我遇到的唯一问题是，因为我是在 php 循环内动态生成这些盒子，所以我还必须动态添加行 div，我希望有一种方法可以避免这种情况。 - Ryan Michael

不错，很高兴你能解决它。 - Carol Skelly

因为我无法创建一个“我也遇到了这个问题”的主题，你有什么线索可以解释为什么在这段代码中没有发生这种情况吗？我已经多次检查了标记，并且除了一些调整以适应我正在处理的布局之外，据我所知，它与你的代码基本相同，但是当长文本和短文本一起显示时，我没有收到相同的结果。 - user753531

Answer 2

Bootstrap团队开发了一个CSS类.row-eq-height，这正是您所需要的。点击此处获取更多信息。 只需在当前行中添加此类，如下所示：

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

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

- Kevin R.

---

row-eq-height 不是官方的 Bootstrap 类。它来自一个由第三方维护的项目。 - Carol Skelly

Answer 3

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

- Kerem Demirer