我正在使用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>
03/19/2019
**Bootstrap 4等高解决方案**
Bootstrap实用工具/flex为相等的高度
活生生的例子在Codepen
由父div固定高度或最小高度的引导类等高
<div class="d-flex align-content-stretch flex-wrap" style="min-height: 200px">
<div>Flex height test text for example , Flex height test text for example </div>
<div>Flex item</div>
<div>Flex item</div>
<div>Flex item</div>
</div>
.bd-highlight {
background-color: rgba(86,61,124,.15);
border: 1px solid rgba(86,61,124,.15);
}
.fixed-height-200 {
min-height: 200px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<br><br><br>
<div class="d-flex align-content-stretch flex-wrap fixed-height-200">
<div class="p-2 bd-highlight">Flex item <br> 1111111111</div>
<div class="p-2 bd-highlight bg-danger">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight bg-info">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight bg-light">Flex item <br> 1111111111</div>
<div class="p-2 bd-highlight">Flex item <br> 1111111111</div>
<div class="p-2 bd-highlight">Flex item <br> 1111111111</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight bg-primary">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
厚脸皮的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()函数中设置了最后一个最高高度
只是通过检查引导文档，我发现了列相同高度问题的简单解决方案。
仅为所需的视口添加额外的clearfix
<div class="clearfix visible-xs-block"></div>
例如:
<div class="col-md-3 col-xs-6">This is a long text</div>
<div class="col-md-3 col-xs-6">This is short</div>
<div class="clearfix visible-xs-block">This is a long text</div>
<div class="col-md-3 col-xs-6">Short</div>
<div class="col-md-3 col-xs-6">Long Text</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-md-3 col-xs-6">Longer text which will push down</div>
<div class="col-md-3 col-xs-6">Short</div>
请参考http://getbootstrap.com/css/#grid-responsive-resets
