使用引导程序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;
}

Bootstap3.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显示）

null

null

Flexbox现在在Bootstrap 4中默认使用，因此不需要额外的CSS来制作等高的列:http://www.codeply.com/go/ijyri4lpwu:http://www.codeply.com/go/ijyri4lpwu

示例:

<div class="container">
    <div class="row">
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>
</div>

不需要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