我正在使用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>
我寻找了一个解决同样问题的方法，发现一个方法很有效!!-
几乎没有额外的代码..
参见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..
最新解决方案(2022年)
解决方案4使用Bootstrap 4或5
Bootstrap 4和5默认使用Flexbox，因此不需要额外的CSS。
Demo
<div class="container">
<div class="row ">
<div class="col-md-4" style="background-color: red">
some content
</div>
<div class="col-md-4" style="background-color: yellow">
catz
<img width="100" height="100" src="https://placekitten.com/100/100/">
</div>
<div class="col-md-4" style="background-color: green">
some more content
</div>
</div>
</div>
解决方案1使用负边距(不会破坏响应性)
Demo
.row{
overflow: hidden;
}
[class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
解决方案2使用表
Demo
.row {
display: table;
}
[class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
使用flex的解决方案3于2015年8月添加。在此之前发布的评论不适用于此解决方案。
Demo
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
