我正在使用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;
}
之前的一些答案解释了如何使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;
}
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>
所以，是的，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个方框
