我正在使用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>
我很惊讶我在2018年底找不到一个有价值的解决方案。我继续前进，并找出了一个Bootstrap 3解决方案自己使用flexbox。
简单明了的例子:
HTML
<div class="row row-equal">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
<p>Text</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
<img src="//placehold.it/200x200">
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
<p>Text</p>
</div>
</div>
CSS
img {
width: 100%;
}
p {
padding: 2em;
}
@media (min-width: 768px) {
.row-equal {
display: flex;
flex-wrap: wrap;
}
.col-equal {
margin: auto;
}
}
查看工作演示:http://jsfiddle.net/5kmtfrny/
我寻找了一个解决同样问题的方法，发现一个方法很有效!!-
几乎没有额外的代码..
参见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..
