我正在使用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>
我尝试了在这个帖子和其他页面上提出的很多建议,但没有一个解决方案在所有浏览器中都100%有效。
所以我做了很长时间的实验,得出了这个结论。
一个完整的解决方案,Bootstrap等高列与flexbox的帮助下,只有一个类。这适用于所有主流浏览器IE10+。
CSS:
.row.equal-cols {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.row.equal-cols:before,
.row.equal-cols:after {
display: block;
}
.row.equal-cols > [class*='col-'] {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.row.equal-cols > [class*='col-'] > * {
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
HTML:
<div class="container">
<div class="row equal-cols">
<div class="col-sm-4">
<div class="content"></div>
</div>
<div class="col-sm-4">
<div class="content"></div>
</div>
<div class="col-sm-4">
<div class="content"></div>
</div>
</div>
</div>
为了支持更多版本的IE,你可以,例如,使用https://github.com/liabru/jquery-match-height和目标。equal-cols的所有子列。是这样的:
// Create a check for IE9 (or any other specific browser).
if(IE9) {
$(".row.equal-cols > [class*='col-']").matchHeight();
}
没有这个填充列将表现为通常引导列,所以这是一个相当好的退一步。
不需要JavaScript。只需添加类.row-等式-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列,引导网格将无法将其包装。添加一个新的div。row。行-等高每12列。
提示:您可能需要添加
<link rel="stylesheet" href="http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css" />
到HTML
我寻找了一个解决同样问题的方法,发现一个方法很有效!!-
几乎没有额外的代码..
参见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..
所以,是的,Bootstrap 4确实使一行中所有的cols高度相等,然而,如果你在一行内的内容周围创建边框,你可能会发现它看起来像cols不等高!
当我对col内的元素应用height: 100%时,我发现我失去了边缘。
我的解决方案是在col的div上使用填充(而不是在内部元素上使用边缘)。像这样:
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 col-12 py-4">
<div class="h-100 border round">
...
</div>
</div>
<div class="col-lg-4 col-md-6 col-12 py-4">
<div class="h-100 border round">
...
</div>
</div>
<div class="col-lg-4 col-md-6 col-12 py-4">
<div class="h-100 border round">
...
</div>
</div>
<div class="col-lg-4 col-md-6 col-12 py-4">
<div class="h-100 border round">
...
</div>
</div>
<div class="col-lg-4 col-md-6 col-12 py-4">
<div class="h-100 border round">
...
</div>
</div>
<div class="col-lg-4 col-md-6 col-12 py-4">
<div class="h-100 border round">
...
</div>
</div>
<div class="col-lg-4 col-md-6 col-12 py-4">
<div class="h-100 border round">
...
</div>
</div>
<div class="col-lg-4 col-md-6 col-12 py-4">
<div class="h-100 border round">
...
</div>
</div>
<div class="col-lg-4 col-md-6 col-12 py-4">
<div class="h-100 border round">
...
</div>
</div>
</div>
</div>
上面的代码示例使用Bootstrap 4.1创建一组带有边框的9个方框