我如何使Bootstrap列的高度一致？
我正在使用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>解决方案1使用负边距（不会中断响应）
演示
.row{
overflow: hidden;
}
[class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
解决方案2使用表
演示
.row {
display: table;
}
[class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
解决方案3使用flex于2015年8月添加。此前发布的评论不适用于此解决方案。
演示
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
2018年更新
Bootstap 3.x的最佳途径 - 使用CSS flexbox （并且需要最少的CSS）..
.equal {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
}
Bootstrap高度相同的Flexbox示例
要仅在特定的断点（响应）应用相同高度的柔性盒，请使用媒体查询。 例如，这里是sm （768px）及以上：
@media (min-width: 768px) {
.row.equal {
display: flex;
flex-wrap: wrap;
}
}
这种解决方案也适用于多行（列换行）：
https://www.bootply.com/gCEXzPMehZ
其他解决方法
这些选项将由其他人推荐，但对于响应式设计不是一个好主意 。 这些仅适用于简单的单行布局而不包括列包装。
1）使用巨大的负边距和填充
2）使用display：table-cell （这个解决方案也会影响响应式网格，所以@media查询可以用来在垂直堆叠之前在更宽的屏幕上应用table显示）
Bootstrap 4
在Bootstrap 4中默认使用Flexbox，因此不需要额外的CSS来制作相同高度的列：http://www.codeply.com/go/IJYRI4LPwU
不需要JavaScript。 只需将类.row-eq-height到现有的.row ，就像这样：
<div class="row row-eq-height">
<div class="col-xs-12 col-sm-4 panel" style="background-color: red">
some content
</div>
<div class="col-xs-6 col-sm-4 panel" style="background-color: yellow">
kittenz
<img src="http://placekitten.com/100/100">
</div>
<div class="col-xs-6 col-sm-4 panel" style="background-color: blue">
some more content
</div>
</div>
提示：如果行中的列数多于12列，则引导程序网格将无法包装它。 因此，每12列添加一个新的div.row.row-eq-height 。
提示：您可能需要添加
<link rel="stylesheet" href="http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css" />
到你的html
链接地址: http://www.djcxy.com/p/13247.html