我正在使用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>
这是我的解决方案(编译CSS):
.row.row-xs-eq {
display: table;
table-layout: fixed;
margin: 0;
}
.row.row-xs-eq::before {
content: none;
}
.row.row-xs-eq::after {
content: none;
}
.row.row-xs-eq > [class^='col-'] {
display: table-cell;
float: none;
padding: 0;
}
@media (min-width: 768px) {
.row.row-sm-eq {
display: table;
table-layout: fixed;
margin: 0;
}
.row.row-sm-eq::before {
content: none;
}
.row.row-sm-eq::after {
content: none;
}
.row.row-sm-eq > [class^='col-'] {
display: table-cell;
float: none;
padding: 0;
}
}
@media (min-width: 992px) {
.row.row-md-eq {
display: table;
table-layout: fixed;
margin: 0;
}
.row.row-md-eq::before {
content: none;
}
.row.row-md-eq::after {
content: none;
}
.row.row-md-eq > [class^='col-'] {
display: table-cell;
float: none;
padding: 0;
}
}
@media (min-width: 1200px) {
.row.row-lg-eq {
display: table;
table-layout: fixed;
margin: 0;
}
.row.row-lg-eq::before {
content: none;
}
.row.row-lg-eq::after {
content: none;
}
.row.row-lg-eq > [class^='col-'] {
display: table-cell;
float: none;
padding: 0;
}
}
所以你的代码看起来像这样:
<div class="row row-sm-eq">
<!-- your old cols definition here -->
</div>
基本上这和你使用.col-*类的系统是一样的，不同的是你需要对行本身应用.row-*类。
使用.row-sm-eq列将堆叠在XS屏幕上。如果你不需要它们堆叠在任何屏幕上，你可以使用.row-xs-eq。
我们实际使用的SASS版本:
.row {
@mixin row-eq-height {
display: table;
table-layout: fixed;
margin: 0;
&::before {
content: none;
}
&::after {
content: none;
}
> [class^='col-'] {
display: table-cell;
float: none;
padding: 0;
}
}
&.row-xs-eq {
@include row-eq-height;
}
@media (min-width: $screen-sm-min) {
&.row-sm-eq {
@include row-eq-height;
}
}
@media (min-width: $screen-md-min) {
&.row-md-eq {
@include row-eq-height;
}
}
@media (min-width: $screen-lg-min) {
&.row-lg-eq {
@include row-eq-height;
}
}
}
现场演示
注意:在一行中混合。col-xs-12和。col-xs-6将不能正常工作。
厚脸皮的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()函数中设置了最后一个最高高度
