jQuery Bootstrap 3 > 尝试创建等高的列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19819816/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 > trying to create columns with equal heights
提问by Ryan Michael
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.
使用 Bootstrap 3 我一直在尝试调整许多内容区域，使它们具有相同的高度。我每行有 4 个，列数未指定（我正在遍历一个 php 数组来确定这一点）。基本上无论我需要显示多少内容区域，它们都应该使用相同的高度，或者至少与它所在行上的其他三个高度相同。
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)
我一直在使用这个 jquery 库 > https://github.com/mattbanks/jQuery.equalHeights> 效果很好，但是每当我调整页面大小时，内容区域的高度都不会更新（如果我将屏幕拖动到新的大小并点击刷新高度重新调整到正确的位置）
I have also looked at a few other solutions such as > Twitter Bootstrap - Same heights on fluid columnsbut this doesn't seem to work when I adjust it for multiple rows.
我还查看了其他一些解决方案，例如 > Twitter Bootstrap - 流体列上的相同高度，但是当我针对多行调整它时，这似乎不起作用。
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.
任何帮助将不胜感激，无论我是应该使用 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>
Above is my html, the second content area has the large amount of copy
上面是我的html，第二个内容区复制量大
<script>
$('#equalheight div').equalHeights();
</script>
<script>
$(window).resize(function(){
$('#equalheight div').equalHeights();
});
$(window).resize();
</script>
Above is my Javascript, calling the before mentioned library.
以上是我的 Javascript，调用前面提到的库。
Thanks for any help / advice
感谢您的任何帮助/建议
采纳答案by Zim
You can try using CSS negative margins (no jQuery needed)..
您可以尝试使用 CSS 负边距（不需要 jQuery）。
.demo{
margin-bottom: -99999px;
padding-bottom: 99999px;
background-color:#efefef;
}
#equalheight {
overflow: hidden;
}
EDIT - another option
编辑 - 另一种选择
Here is another example using CSS3 flexboxspec: http://www.bootply.com/126437
这是使用 CSS3flexbox规范的另一个示例：http: //www.bootply.com/126437
回答by Kevin R.
Bootstrap team developped a CSS class .row-eq-heightwhich is exactly what you need. See herefor more.
Just add this class on your current row like this:
Bootstrap 团队开发了一个 CSS 类.row-eq-height，这正是您所需要的。请参阅此处了解更多信息。只需在当前行中添加此类，如下所示：
<div class="row row-eq-height">
your columns
</div>
Warning:You have to add a new div.row.row-eq-heighteach 12 columns
警告：您必须div.row.row-eq-height每 12 列添加一个新的
回答by Kerem Demirer
You can use this plugin. It works pretty good.
你可以使用这个插件。它工作得很好。
