我知道我来晚了，但是现在您可以使用“min-height”样式属性来达到您的目的。

要回答你的问题，这是所有你需要看到完整的响应式演示与前缀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。

最新解决方案(2022年)

解决方案4使用Bootstrap 4或5

Bootstrap 4和5默认使用Flexbox，因此不需要额外的CSS。

Demo

<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使用负边距(不会破坏响应性)

Demo

.row{
    overflow: hidden; 
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

解决方案2使用表

Demo

.row {
    display: table;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

使用flex的解决方案3于2015年8月添加。在此之前发布的评论不适用于此解决方案。

Demo

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

对于那些寻找一个快速，简单的解决方案-如果你有一个相对一致的块内容集，在div上设置一个最小高度，比最大的块大一点，可以更容易实现。

.align-box {
    min-height: 400px;
}

之前的一些答案解释了如何使div具有相同的高度，但问题是，当宽度太窄时，div不会堆叠，因此你可以实现他们的答案与一个额外的部分。对于每一个，你可以使用这里给出的CSS名称，除了你使用的行类，所以如果你总是想让div彼此相邻，div应该是这样的:

<div class="row row-eq-height-xs">Your Content Here</div>

对于所有屏幕:

.row-eq-height-xs {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: row;
}

当你想使用sm时:

.row-eq-height-sm {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:768px) {
    .row-eq-height-sm {
        flex-direction: row;
    }
}

当你想要md时:

.row-eq-height-md {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:992px) {
    .row-eq-height-md {
        flex-direction: row;
    }
}

当你想使用lg时:

.row-eq-height-lg {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:1200px) {
    .row-eq-height-md {
        flex-direction: row;
    }
}

编辑 根据评论，确实有一个更简单的解决方案，但你需要确保从所有尺寸的最大所需宽度到xs(例如<div class="col-md-3 col-sm-4 col-xs-12">:

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

您只显示一行，所以您的用例可能仅限于此。以防你有多行，这个插件- github javascript -grid -工作完美!它使每个面板扩展到最高的面板，根据该行中最高的面板为每一行提供不同的高度。这是一个jquery解决方案vs. css，但想推荐它作为一个替代方法。