我正在使用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>
所以,是的,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个方框
我尝试了在这个帖子和其他页面上提出的很多建议,但没有一个解决方案在所有浏览器中都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();
}
没有这个填充列将表现为通常引导列,所以这是一个相当好的退一步。
我使用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; ?>
我很惊讶我在2018年底找不到一个有价值的解决方案。我继续前进,并找出了一个Bootstrap 3解决方案自己使用flexbox。
简单明了的例子:
HTML
<div class="row row-equal">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
<p>Text</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
<img src="//placehold.it/200x200">
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
<p>Text</p>
</div>
</div>
CSS
img {
width: 100%;
}
p {
padding: 2em;
}
@media (min-width: 768px) {
.row-equal {
display: flex;
flex-wrap: wrap;
}
.col-equal {
margin: auto;
}
}
查看工作演示:http://jsfiddle.net/5kmtfrny/