您可以将列包装在div中

<div class="row">
<div class="col-md-12>
  <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>
</div>

@media (min-width: @screen-sm-min) {
    div.equal-height-sm {
        display: table;


        > div[class^='col-'] {
            display: table-cell;
            float: none;
            vertical-align: top;
        }
    }
}

<div class="equal-height-sm">
    <div class="col-xs-12 col-sm-7">Test<br/>Test<br/>Test</div>
    <div class="col-xs-12 col-sm-5">Test</div>
</div>

例子:

https://jsfiddle.net/b9chris/njcnex83/embedded/result/

这里改编自几个答案。一旦IE8和ie9被淘汰，一旦Android 2被淘汰，基于flexbox的答案就是正确的方法。X已经死了，但在2015年并不是这样，在2016年也不会。IE8和ie9的使用率仍占4-6%，这取决于你如何衡量，对于许多企业用户来说，情况要糟糕得多。http://caniuse.com/#feat=flexbox

display: table, display: table-cell的技巧是向后兼容的，一个很棒的事情是唯一严重的兼容性问题是Safari的问题，它强制box-sizing: border-box，这已经应用到Bootstrap标签上了。http://caniuse.com/#feat=css-table

显然，您可以添加更多做类似事情的类，如.equal-height-md。我将这些标记与div绑定在一起，以便在受限制的使用中获得较小的性能收益，但您可以删除标记，使其像Bootstrap的其余部分一样更通用。

注意，这里的jsfiddle使用CSS，因此，Less将提供的内容硬编码在链接的示例中。例如@screen-sm-min已经被Less插入的- 768px所取代。

最新解决方案(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;
}

只是通过检查引导文档，我发现了列相同高度问题的简单解决方案。

仅为所需的视口添加额外的clearfix

<div class="clearfix visible-xs-block"></div>

例如:

<div class="col-md-3 col-xs-6">This is a long text</div>
<div class="col-md-3 col-xs-6">This is short</div>
<div class="clearfix visible-xs-block">This is a long text</div>
<div class="col-md-3 col-xs-6">Short</div>
<div class="col-md-3 col-xs-6">Long Text</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-md-3 col-xs-6">Longer text which will push down</div>
<div class="col-md-3 col-xs-6">Short</div>

请参考http://getbootstrap.com/css/#grid-responsive-resets

不需要JavaScript。只需添加类.row-等式-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列，引导网格将无法将其包装。添加一个新的div。row。行-等高每12列。

提示:您可能需要添加

<link rel="stylesheet" href="http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css" />

到HTML

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

希望这能有所帮助!