我正在使用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>
更新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查询仅在列垂直堆叠之前在更宽的屏幕上应用表显示)
我想我只是补充一下，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;
}
}
我寻找了一个解决同样问题的方法，发现一个方法很有效!!-
几乎没有额外的代码..
参见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..
