这是我的解决方案(编译CSS):

.row.row-xs-eq {
  display: table;
  table-layout: fixed;
  margin: 0;
}

.row.row-xs-eq::before {
  content: none;
}

.row.row-xs-eq::after {
  content: none;
}

.row.row-xs-eq > [class^='col-'] {
  display: table-cell;
  float: none;
  padding: 0;
}

@media (min-width: 768px) {
  .row.row-sm-eq {
    display: table;
    table-layout: fixed;
    margin: 0;
  }

  .row.row-sm-eq::before {
    content: none;
  }

  .row.row-sm-eq::after {
    content: none;
  }

  .row.row-sm-eq > [class^='col-'] {
    display: table-cell;
    float: none;
    padding: 0;
  }
}

@media (min-width: 992px) {
  .row.row-md-eq {
    display: table;
    table-layout: fixed;
    margin: 0;
  }

  .row.row-md-eq::before {
    content: none;
  }

  .row.row-md-eq::after {
    content: none;
  }

  .row.row-md-eq > [class^='col-'] {
    display: table-cell;
    float: none;
    padding: 0;
  }
}

@media (min-width: 1200px) {
  .row.row-lg-eq {
    display: table;
    table-layout: fixed;
    margin: 0;
  }

  .row.row-lg-eq::before {
    content: none;
  }

  .row.row-lg-eq::after {
    content: none;
  }

  .row.row-lg-eq > [class^='col-'] {
    display: table-cell;
    float: none;
    padding: 0;
  }
}

所以你的代码看起来像这样:

<div class="row row-sm-eq">
  <!-- your old cols definition here -->
</div>

基本上这和你使用.col-*类的系统是一样的，不同的是你需要对行本身应用.row-*类。

使用.row-sm-eq列将堆叠在XS屏幕上。如果你不需要它们堆叠在任何屏幕上，你可以使用.row-xs-eq。

我们实际使用的SASS版本:

.row {
  @mixin row-eq-height {
    display: table;
    table-layout: fixed;
    margin: 0;

    &::before {
      content: none;
    }

    &::after {
      content: none;
    }

    > [class^='col-'] {
      display: table-cell;
      float: none;
      padding: 0;
    }
  }

  &.row-xs-eq {
    @include row-eq-height;
  }

  @media (min-width: $screen-sm-min) {
    &.row-sm-eq {
      @include row-eq-height;
    }
  }

  @media (min-width: $screen-md-min) {
    &.row-md-eq {
      @include row-eq-height;
    }
  }

  @media (min-width: $screen-lg-min) {
    &.row-lg-eq {
      @include row-eq-height;
    }
  }
}

现场演示

注意:在一行中混合。col-xs-12和。col-xs-6将不能正常工作。

如果这在您的上下文中有意义，您可以在每次休息后添加一个空的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 > < !——这个你忘了关——>

希望这能有所帮助!

您可以使用下面的代码

var heights = $(".row > div").map(function() {
    return $(this).height();
}).get(),
maxHeight = Math.max.apply(null, heights);
$(".row > div").height(maxHeight);

如果你想让它在任何浏览器中工作，使用javascript:

$( document ).ready(function() {
    var heights = $(".panel").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".panel").height(maxHeight);
});

我很惊讶我在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/

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

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

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

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