小编典典

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

all

我正在使用引导程序。如何使三列高度相同？

这是问题的屏幕截图。我希望蓝色和红色列与黄色列的高度相同。

三个自举柱，中心柱比其他两柱长

这是代码：

<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>

阅读 143

2022-02-28

共1个答案

小编典典

最新解决方案 (2022)

使用 Bootstrap 4 或 5 的解决方案 4

Bootstrap 4 和 5 默认使用 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;
}

2022-02-28