我正在使用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;
}
最新解决方案(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;
}
我使用clearfix这个超级简单的解决方案，它没有任何副作用。
下面是AngularJS的一个例子:
<div ng-repeat-start="item in list">
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div>
</div>
<div ng-repeat-end>
<div ng-if="$index % 3 == 2" class="clearfix visible-lg"></div>
<div ng-if="$index % 2 == 1" class="clearfix visible-md"></div>
</div>
还有一个关于PHP的例子:
<?php foreach ($list as $i => $item): ?>
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div>
<div class="clearfix visible-md"></div>
<?php if ($i % 2 === 1): ?>
<div class="clearfix visible-lg"></div>
<?php endif; ?>
<?php endforeach; ?>
我想我只是补充一下，Dr.Flink给出的答案也可以应用到Bootstrap 3表单水平块——如果你想为每个单元格使用背景色，这是非常方便的。为了使这适用于引导表单，您需要包装表单内容，这只是为了复制一个类似表格的结构。
下面的例子还提供了CSS，它演示了一个额外的媒体查询允许Bootstrap 3简单地接管并在较小的屏幕上做正常的事情。这也适用于IE8+。
例子:
<form class="form-horizontal" role="form">
<div class="form-wrapper">
<div class="form-group">
<label class="col-xs-12 col-sm-2 control-label">My Label</label>
<div class="col-xs-12 col-sm-10">
Some content
</div>
</div>
</div>
</form>
.form-wrapper {
display: table;
}
.form-wrapper .form-group {
display: table-row;
}
.form-wrapper .form-group .control-label {
display: table-cell;
float: none;
}
.form-wrapper .form-group label + div {
display: table-cell;
float: none;
}
@media (max-width: 768px) {
.form-wrapper {
display: inherit;
}
.form-wrapper .form-group {
display: block;
}
.form-wrapper .form-group .control-label {
display: inherit;
}
.form-wrapper .form-group label + div {
display: inherit;
}
}
