我正在使用Bootstrap。如何让三根柱子都一样高呢?
下面是问题的截图。我希望蓝色和红色的列和黄色的列一样高。
代码如下:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 panel" style="background-color: red">
some content
</div>
<div class="col-xs-4 panel" style="background-color: yellow">
catz
<img width="100" height="100" src="https://lorempixel.com/100/100/cats/">
</div>
<div class="col-xs-4 panel" style="background-color: blue">
some more content
</div>
</div>
</div>
厚脸皮的jquery解决方案，如果有人感兴趣。只要确保你所有的col (el)有一个共同的类名…如果你将它绑定到$(window).resize，也可以响应
function equal_cols(el)
{
var h = 0;
$(el).each(function(){
$(this).css({'height':'auto'});
if($(this).outerHeight() > h)
{
h = $(this).outerHeight();
}
});
$(el).each(function(){
$(this).css({'height':h});
});
}
使用
$(document).ready(function(){
equal_cols('.selector');
});
注意:这篇文章已经根据@Chris的评论进行了编辑，该代码只在$.each()函数中设置了最后一个最高高度
厚脸皮的jquery解决方案，如果有人感兴趣。只要确保你所有的col (el)有一个共同的类名…如果你将它绑定到$(window).resize，也可以响应
function equal_cols(el)
{
var h = 0;
$(el).each(function(){
$(this).css({'height':'auto'});
if($(this).outerHeight() > h)
{
h = $(this).outerHeight();
}
});
$(el).each(function(){
$(this).css({'height':h});
});
}
使用
$(document).ready(function(){
equal_cols('.selector');
});
注意:这篇文章已经根据@Chris的评论进行了编辑，该代码只在$.each()函数中设置了最后一个最高高度
我尝试了在这个帖子和其他页面上提出的很多建议，但没有一个解决方案在所有浏览器中都100%有效。
所以我做了很长时间的实验，得出了这个结论。
一个完整的解决方案，Bootstrap等高列与flexbox的帮助下，只有一个类。这适用于所有主流浏览器IE10+。
CSS:
.row.equal-cols {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.row.equal-cols:before,
.row.equal-cols:after {
display: block;
}
.row.equal-cols > [class*='col-'] {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.row.equal-cols > [class*='col-'] > * {
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
HTML:
<div class="container">
<div class="row equal-cols">
<div class="col-sm-4">
<div class="content"></div>
</div>
<div class="col-sm-4">
<div class="content"></div>
</div>
<div class="col-sm-4">
<div class="content"></div>
</div>
</div>
</div>
为了支持更多版本的IE，你可以，例如，使用https://github.com/liabru/jquery-match-height和目标。equal-cols的所有子列。是这样的:
// Create a check for IE9 (or any other specific browser).
if(IE9) {
$(".row.equal-cols > [class*='col-']").matchHeight();
}
没有这个填充列将表现为通常引导列，所以这是一个相当好的退一步。
