我正在使用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将不能正常工作。
最新解决方案(2022年)
解决方案4使用Bootstrap 4或5
Bootstrap 4和5默认使用Flexbox，因此不需要额外的CSS。
Demo
<div class="container">
<div class="row ">
<div class="col-md-4" style="background-color: red">
some content
</div>
<div class="col-md-4" style="background-color: yellow">
catz
<img width="100" height="100" src="https://placekitten.com/100/100/">
</div>
<div class="col-md-4" style="background-color: green">
some more content
</div>
</div>
</div>
解决方案1使用负边距(不会破坏响应性)
Demo
.row{
overflow: hidden;
}
[class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
解决方案2使用表
Demo
.row {
display: table;
}
[class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
使用flex的解决方案3于2015年8月添加。在此之前发布的评论不适用于此解决方案。
Demo
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
我尝试了在这个帖子和其他页面上提出的很多建议，但没有一个解决方案在所有浏览器中都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();
}
没有这个填充列将表现为通常引导列，所以这是一个相当好的退一步。
所以，是的，Bootstrap 4确实使一行中所有的cols高度相等，然而，如果你在一行内的内容周围创建边框，你可能会发现它看起来像cols不等高!
当我对col内的元素应用height: 100%时，我发现我失去了边缘。
我的解决方案是在col的div上使用填充(而不是在内部元素上使用边缘)。像这样:
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 col-12 py-4">
<div class="h-100 border round">
...
</div>
</div>
<div class="col-lg-4 col-md-6 col-12 py-4">
<div class="h-100 border round">
...
</div>
</div>
<div class="col-lg-4 col-md-6 col-12 py-4">
<div class="h-100 border round">
...
</div>
</div>
<div class="col-lg-4 col-md-6 col-12 py-4">
<div class="h-100 border round">
...
</div>
</div>
<div class="col-lg-4 col-md-6 col-12 py-4">
<div class="h-100 border round">
...
</div>
</div>
<div class="col-lg-4 col-md-6 col-12 py-4">
<div class="h-100 border round">
...
</div>
</div>
<div class="col-lg-4 col-md-6 col-12 py-4">
<div class="h-100 border round">
...
</div>
</div>
<div class="col-lg-4 col-md-6 col-12 py-4">
<div class="h-100 border round">
...
</div>
</div>
<div class="col-lg-4 col-md-6 col-12 py-4">
<div class="h-100 border round">
...
</div>
</div>
</div>
</div>
上面的代码示例使用Bootstrap 4.1创建一组带有边框的9个方框
