所以，是的，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个方框

我很惊讶我在2018年底找不到一个有价值的解决方案。我继续前进，并找出了一个Bootstrap 3解决方案自己使用flexbox。

简单明了的例子:

HTML

<div class="row row-equal">
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
        <p>Text</p>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
        <img src="//placehold.it/200x200">
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
        <p>Text</p>
    </div>  
</div>

CSS

img {
  width: 100%;
}
p {
  padding: 2em;
}
@media (min-width: 768px) {
  .row-equal {
    display: flex;
    flex-wrap: wrap;
  }
  .col-equal {
    margin: auto;
  }
}

查看工作演示:http://jsfiddle.net/5kmtfrny/

更新2021

引导 4 + 5

Flexbox现在在Bootstrap 4(和Bootstrap 5)中默认使用，因此不需要额外的CSS来创建等高列:https://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>

引导3

引导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.codeply.com/go/bp/gCEXzPMehZ

其他解决方法

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

使用巨大的负边距和填充 使用display:table-cell(此解决方案也会影响响应网格，因此可以使用@media查询仅在列垂直堆叠之前在更宽的屏幕上应用表显示)

.row.container-height {
    overflow: hidden;
}

.row.container-height>[class*="col-"] {
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

其中.container-height是必须添加到.row样式元素中的样式类，该元素的所有.col*子元素都具有相同的高度。

将这些样式仅应用于某些特定的.row(使用.container-height，如示例所示)还可以避免将边缘和填充溢出应用于所有.col*。

如果这在您的上下文中有意义，您可以在每次休息后添加一个空的12列div，它作为包含行中最高单元格底部的分隔符。

< div class = "行" > <div class="col-xs-6">一些内容</div> < div class = " col-xs-6”> 很多内容!很多内容!很多内容!很多内容!很多内容! < / div > <div id="space -div" class="col-x -12"></div> . <div class="col-xs-6">更多内容 < / div > < !——这个你忘了关——>

希望这能有所帮助!

我想我只是补充一下，Dr.Flink给出的答案也可以应用到Bootstrap 3表单水平块——如果你想为每个单元格使用背景色，这是非常方便的。为了使这适用于引导表单，您需要包装表单内容，这只是为了复制一个类似表格的结构。

下面的例子还提供了CSS，它演示了一个额外的媒体查询允许Bootstrap 3简单地接管并在较小的屏幕上做正常的事情。这也适用于IE8+。

例子:

<form class="form-horizontal" role="form">

  <div class="form-wrapper">
    <div class="form-group">
      <label class="col-xs-12 col-sm-2 control-label">My Label</label>
      <div class="col-xs-12 col-sm-10">
        Some content
      </div>
    </div>
  </div>

</form>

.form-wrapper {
  display: table;
}

.form-wrapper .form-group {
  display: table-row;
}

.form-wrapper .form-group .control-label {
  display: table-cell;
  float: none;
}

.form-wrapper .form-group label + div {
  display: table-cell;
  float: none;
}

@media (max-width: 768px) {
  .form-wrapper {
    display: inherit;
  }
  .form-wrapper .form-group {
    display: block;
  }
  .form-wrapper .form-group .control-label {
    display: inherit;
  }
  .form-wrapper .form-group label + div {
    display: inherit;
  }
}