我正在使用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>
之前的一些答案解释了如何使div具有相同的高度，但问题是，当宽度太窄时，div不会堆叠，因此你可以实现他们的答案与一个额外的部分。对于每一个，你可以使用这里给出的CSS名称，除了你使用的行类，所以如果你总是想让div彼此相邻，div应该是这样的:
<div class="row row-eq-height-xs">Your Content Here</div>
对于所有屏幕:
.row-eq-height-xs {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: row;
}
当你想使用sm时:
.row-eq-height-sm {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
}
@media (min-width:768px) {
.row-eq-height-sm {
flex-direction: row;
}
}
当你想要md时:
.row-eq-height-md {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
}
@media (min-width:992px) {
.row-eq-height-md {
flex-direction: row;
}
}
当你想使用lg时:
.row-eq-height-lg {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
}
@media (min-width:1200px) {
.row-eq-height-md {
flex-direction: row;
}
}
编辑
根据评论，确实有一个更简单的解决方案，但你需要确保从所有尺寸的最大所需宽度到xs(例如<div class="col-md-3 col-sm-4 col-xs-12">:
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
@media (min-width: @screen-sm-min) {
div.equal-height-sm {
display: table;
> div[class^='col-'] {
display: table-cell;
float: none;
vertical-align: top;
}
}
}
<div class="equal-height-sm">
<div class="col-xs-12 col-sm-7">Test<br/>Test<br/>Test</div>
<div class="col-xs-12 col-sm-5">Test</div>
</div>
例子:
https://jsfiddle.net/b9chris/njcnex83/embedded/result/
这里改编自几个答案。一旦IE8和ie9被淘汰，一旦Android 2被淘汰，基于flexbox的答案就是正确的方法。X已经死了，但在2015年并不是这样，在2016年也不会。IE8和ie9的使用率仍占4-6%，这取决于你如何衡量，对于许多企业用户来说，情况要糟糕得多。http://caniuse.com/#feat=flexbox
display: table, display: table-cell的技巧是向后兼容的，一个很棒的事情是唯一严重的兼容性问题是Safari的问题，它强制box-sizing: border-box，这已经应用到Bootstrap标签上了。http://caniuse.com/#feat=css-table
显然，您可以添加更多做类似事情的类，如.equal-height-md。我将这些标记与div绑定在一起，以便在受限制的使用中获得较小的性能收益，但您可以删除标记，使其像Bootstrap的其余部分一样更通用。
注意，这里的jsfiddle使用CSS，因此，Less将提供的内容硬编码在链接的示例中。例如@screen-sm-min已经被Less插入的- 768px所取代。
厚脸皮的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()函数中设置了最后一个最高高度
更新2021
引导 4 + 5
Flexbox现在在Bootstrap 4(和Bootstrap 5)中默认使用，因此不需要额外的CSS来创建等高列:https://www.codeply.com/go/IJYRI4LPwU
例子:
<div class="container">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
引导3
引导3的最佳方法。x -使用CSS flexbox(需要最小的CSS)…
.equal {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
}
Bootstrap相同高度flexbox的例子
若要仅在特定断点(响应式)应用相同高度的flexbox，请使用媒体查询。例如，这里是sm (768px)及以上:
@media (min-width: 768px) {
.row.equal {
display: flex;
flex-wrap: wrap;
}
}
此解决方案也适用于多行(列换行):https://www.codeply.com/go/bp/gCEXzPMehZ
其他解决方法
其他人会推荐这些选项，但对于响应式设计来说并不是一个好主意。这些只适用于简单的单行布局，没有列换行。
使用巨大的负边距和填充
使用display:table-cell(此解决方案也会影响响应网格，因此可以使用@media查询仅在列垂直堆叠之前在更宽的屏幕上应用表显示)
