如何使Bootstrap列都具有相同的高度？

小编典典

如何使Bootstrap列都具有相同的高度？

css

我正在使用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>

阅读 1180

2020-05-19

小编典典

使用Bootstrap 4的解决方案4

Bootstrap 4使用Flexbox，因此不需要额外的CSS。

<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使用负边距（不会破坏响应能力）

.row{
    overflow: hidden; 
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

解决方案2使用表

.row {
    display: table;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

使用Flex的解决方案3已于2015年8月添加。此之前发布的注释不适用于此解决方案。

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

2020-05-19

小编典典

更新2020
Bootstap 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;
  }
}

2020-05-19

如何使Bootstrap列都具有相同的高度？

共2个答案