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

使用负边距的解决方案 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;
}

更新 2018 年

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

此解决方案也适用于多行（列包装）：
https://www.bootply.com/gCEXzPMehZ

其他解决方法

其他人会推荐这些选项，但对于响应式设计并不是一个好主意 。这些仅适用于没有列包装的简单单行布局。

1）使用巨大的负边距和填充

2）使用display：table-cell （此解决方案也会影响响应网格，因此 @media 查询可用于仅在列垂直堆叠之前在更宽的屏幕上应用table显示）

Bootstrap 4

默认情况下，Flexbox 现在在 Bootstrap 4 中使用，因此不需要额外的 CSS 来制作相同高度的列： http ： //www.codeply.com/go/IJYRI4LPwU

不需要 JavaScript。只需将类.row-eq-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 列，则引导网格将无法包装它。因此，每 12 列添加一个新的div.row.row-eq-height 。

提示：您可能需要添加

<link rel="stylesheet" href="http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css" />

你的 HTML