我正在使用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将不能正常工作。
我寻找了一个解决同样问题的方法,发现一个方法很有效!!-
几乎没有额外的代码..
参见https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27
为了更好的讨论,你想要的答案在底部,有一个链接。
https://www.codeply.com/go/EskIjvun4B
对我来说,这是正确的回应方式。
引用:
...
3 -使用flexbox(最好!)
截至2017年,在响应式设计中制作等高列的最佳(也是最简单)方法是使用CSS3 flexbox。
.row.display-flex {
display: flex;
flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
display: flex;
flex-direction: column;
}
简单地使用:
div class="container">
<div class="row display-flex .... etc..