这里有很多CSS…

jQuery

$(document).ready(function() {

   // Get height of original column you want to match
   var box-height = $('.panel:nth-child(1)').outerHeight();

   // Output same height on particular element or element(s)
   $('.panel').height(box-height);

});

非常简单的代码，不需要玩css，尽管上面所有的选项都是完全可用的。

杰斯菲德尔

来自官方文件。也许你可以用在你的案子上。

当你需要等高时，在卡片上加上。h-100。

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
   <div class="card h-100">
     <div>.....</div>
  </div>
  <div class="col">
   <div class="card h-100">
     <div>.....</div>
  </div>

厚脸皮的jquery解决方案，如果有人感兴趣。只要确保你所有的col (el)有一个共同的类名…如果你将它绑定到$(window).resize，也可以响应

function equal_cols(el)
{
    var h = 0;
    $(el).each(function(){
        $(this).css({'height':'auto'});
        if($(this).outerHeight() > h)
        {
            h = $(this).outerHeight();
        }
    });
    $(el).each(function(){
        $(this).css({'height':h});
    });
}

使用

$(document).ready(function(){
   equal_cols('.selector');
});

注意:这篇文章已经根据@Chris的评论进行了编辑，该代码只在$.each()函数中设置了最后一个最高高度

这是我的解决方案(编译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将不能正常工作。

你也可以使用内联伸缩，这工作得很好，可能比用CSS修改每个行元素要干净一点。

对于我的项目，我希望每行谁的子元素有边界是相同的高度，这样边界将看起来参差不齐。为此，我创建了一个简单的css类。

.row.borders{
    display: inline-flex;
    width: 100%;
}

要回答你的问题，这是所有你需要看到完整的响应式演示与前缀css:

/* Using col-xs media query breakpoint but you can change 481 to 768 to only apply to col-sm and above if you'd like*/

@media only screen and (min-width : 481px) {
    .flex-row {
        display: flex;
        flex-wrap: wrap;
    }
    .flex-row > [class*='col-'] {
        display: flex;
        flex-direction: column;
    }
    .flex-row.row:after, 
    .flex-row.row:before {
        display: flex;
    }
}

要添加缩略图内容的支持，在伸缩列中，如上面的截图，还添加这个…注意，你也可以在面板上做到这一点:

.flex-row .thumbnail,
.flex-row .caption {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}
.flex-text {
    flex-grow: 1;
}    
.flex-row img {
    width: 100%;
}

虽然flexbox不能在IE9及以下版本中工作，但你可以使用带有条件标签的演示版本，并使用类似javascript网格的东西作为填充:

<!--[if lte IE 9]>

<![endif]-->

As for the other two examples in the accepted answer... The table demo is a decent idea but is being implemented wrong. Applying that CSS on bootstrap column classes specifically will without a doubt break the grid framework entirely. You should be using a custom selector for one and two the tables styles should not be applied to [class*='col-'] that have defined widths. This method should ONLY be used if you want equal height AND equal width columns. It is not meant for any other layouts and is NOT responsive. We can make it fallback however on mobile displays...

<div class="table-row-equal">
<div class="thumbnail">
    Content...
</div>
<div class="thumbnail">
    Content...
</div>
</div>

@media only screen and (min-width : 480px){
    .table-row-equal {
        display: table;
        width: 100%;
        table-layout: fixed;
        border-spacing: 30px 0px;
        word-wrap: break-word;
    }
    .table-row-equal .thumbnail {
        float: none;
        display: table-cell;
        vertical-align: top;
        width: 1%;
    }
}

Lastly, the first demo in the accepted answer which implements a version of the one true layout is a good choice for some situations, but not suitable for bootstrap columns. The reason for this is that all the columns expand to the container height. So this will also break responsiveness since the columns are not expanding to the elements next to them, but the entire container. This method will also not allow you to apply bottom margins to rows any longer and will also cause other issues along the way like scrolling to anchor tags.

有关完整的代码，请参阅自动添加flexbox代码前缀的Codepen。