jQuery 在引导程序中使列具有相同的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18227326/
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
Make columns the same height in bootstrap
提问by oliverbj
I have three columns inside a row. I want all three columns to have the same height (fill the entire white space out)
我在一行中有三列。我希望所有三列都具有相同的高度（填充整个空白区域）
Currently, it looks like this:
目前，它看起来像这样：
As you can see, the left column is the correct height. Where the middle and the right aren't.
如您所见，左列是正确的高度。中间和右边没有的地方。
The scaffolding of it looks like this:
它的脚手架是这样的：
<div class="container">
<div class="row">
<div class="span3">
-- menu --
</div>
<div class="span5">
-- gray content --
</div>
<div class="span3">
-- black content--
</div>
</div>
</div>
I've tried to give the middle and the right span height of 100%, but that doesn't do it. Can anybody guide me in the correct direction?
我试图给中间和正确的跨度高度 100%，但这并没有做到。有人可以指导我正确的方向吗？
I am using the latest version of Twitter Bootstrap
我正在使用最新版本的 Twitter Bootstrap
回答by Maurizio Pozzobon
I found this solution for bootstrap 3 which works great for me
我发现这个 bootstrap 3 的解决方案对我很有用
http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
It uses these styles:
它使用这些样式：
/* columns of same height styles */
.container-xs-height {
display:table;
padding-left:0px;
padding-right:0px;
}
.row-xs-height {
display:table-row;
}
.col-xs-height {
display:table-cell;
float:none;
}
@media (min-width: 768px) {
.container-sm-height {
display:table;
padding-left:0px;
padding-right:0px;
}
.row-sm-height {
display:table-row;
}
.col-sm-height {
display:table-cell;
float:none;
}
}
@media (min-width: 992px) {
.container-md-height {
display:table;
padding-left:0px;
padding-right:0px;
}
.row-md-height {
display:table-row;
}
.col-md-height {
display:table-cell;
float:none;
}
}
@media (min-width: 1200px) {
.container-lg-height {
display:table;
padding-left:0px;
padding-right:0px;
}
.row-lg-height {
display:table-row;
}
.col-lg-height {
display:table-cell;
float:none;
}
}
/* vertical alignment styles */
.col-top {
vertical-align:top;
}
.col-middle {
vertical-align:middle;
}
.col-bottom {
vertical-align:bottom;
}
And this markup
而这个标记
<div class="container container-xs-height">
<div class="row row-xs-height">
<div class="col-xs-6 col-xs-height"></div>
<div class="col-xs-3 col-xs-height col-top"></div>
<div class="col-xs-2 col-xs-height col-middle"></div>
<div class="col-xs-1 col-xs-height col-bottom"></div>
</div>
</div>
回答by Itay
You can solve this without JS. Just use
你可以在没有 JS 的情况下解决这个问题。只需使用
bottom: 0;
top: 0;
position: absolute; /* The container must have position: relative */
It does magic :)
它有魔法:)
An example I've made: http://fiddle.jshell.net/E8SK6/1
我做了一个例子：http: //fiddle.jshell.net/E8SK6/1
Result: http://fiddle.jshell.net/E8SK6/1/show/
结果：http: //fiddle.jshell.net/E8SK6/1/show/
Edit:
编辑：
Since you said on a comment that the menu is always the biggest, you can use this new example: http://fiddle.jshell.net/E8SK6/5/
由于您在评论中说菜单总是最大的，您可以使用这个新示例：http: //fiddle.jshell.net/E8SK6/5/
If you don't know which one of them is the longest, maybe the answer on this threadis better. It uses display: table-cell. Here's the example
回答by Coop
Ah this is an age old issue.
啊，这是一个古老的问题。
If you set 100% height on an element, it's parent needs a set height for it to go off. Since the div.row has a fluid height, that won't work.
如果您在元素上设置 100% 高度，则它的父级需要设置高度才能使其关闭。由于 div.row 具有流体高度，因此行不通。
The way around this would be:
解决这个问题的方法是：
Set a fixed height on the div.row(probably not a good idea if you want a fluid design)
在上设置固定高度div.row（如果您想要流畅的设计，可能不是一个好主意）
or
或者
Use jQuery to do it:
使用 jQuery 来做到这一点：
HTML
HTML
<div class="row equalHeight">
<div class="span3">
-- menu --
</div>
<div class="span5">
-- gray content --
</div>
<div class="span3">
-- black content--
</div>
</div>
jQuery
jQuery
$('.equalHeight').each(function() {
var eHeight = $(this).innerHeight();
$(this).find('div').outerHeight(eHeight);
});
回答by candleHyman
Today, is possible with row-eq-height
今天，有可能 row-eq-height
LINK:http://getbootstrap.com.vn/examples/equal-height-columns/
链接：http : //getbootstrap.com.vn/examples/equal-height-columns/
