[英]Bootstrap 3 Grid how to make nested columns all the same height as the largest
[英]Make columns the same height in bootstrap
我连续三列。 我希望所有三列具有相同的高度(填满整个空白区域)
目前,它看起来像这样:
如您所见,左列是正确的高度。 中间和右边不是。
它的脚手架看起来像这样:
<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>
我试图给出100%的中间和右侧跨度高度,但这并不是这样。 任何人都可以指导我正确的方向吗?
我正在使用最新版本的Twitter Bootstrap
我为bootstrap 3找到了这个解决方案,对我来说很有用
http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
它使用以下样式:
/* 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;
}
而这个标记
<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>
没有JS就可以解决这个问题。 只是用
bottom: 0;
top: 0;
position: absolute; /* The container must have position: relative */
它真的很神奇:)
我做的一个例子: http : //fiddle.jshell.net/E8SK6/1
结果: http : //fiddle.jshell.net/E8SK6/1/show/
编辑 :
由于你在评论中说菜单总是最大的,你可以使用这个新的例子: http : //fiddle.jshell.net/E8SK6/5/
啊这是一个古老的问题。
如果在元素上设置100%高度,则它的父级需要设置高度才能使其关闭。 由于div.row具有流体高度,因此无效。
解决这个问题的方法是:
在div.row
上设置一个固定的高度(如果你想要流畅的设计,可能不是一个好主意)
要么
使用jQuery来做到这一点:
HTML
<div class="row equalHeight">
<div class="span3">
-- menu --
</div>
<div class="span5">
-- gray content --
</div>
<div class="span3">
-- black content--
</div>
</div>
jQuery的
$('.equalHeight').each(function() {
var eHeight = $(this).innerHeight();
$(this).find('div').outerHeight(eHeight);
});
今天,可以使用row-eq-height
链接: http : //getbootstrap.com.vn/examples/equal-height-columns/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.