HTML

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span4 option2">
            <p>left column </p>
            <p>The first column has to be the longest The first column has to be the longes</p>
        </div>

        <div class="span4 option2">
            <p>middle column</p>
        </div>

        <div class="span4 option2">
            <p>right column </p>
            <p>right column </p>
            <p>right column </p>
            <p>right column </p>
            <p>right column </p>
        </div>
    </div>
</div>

CSS

.option2 { background: red; border: black 1px solid; color: white; }

JS

$('.option2').css({
    'height': $('.option2').height()
});

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

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

在只对行中的列应用解决方案1时，会出现一个问题。想改进解决方案1。

 [class^="col-"]:not([class*="-12"]){
      margin-bottom: -99999px;
      padding-bottom: 99999px;
  }

(抱歉，不能评论Popnoodles的回答。我的名声不够好)

不需要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

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

当你需要等高时，在卡片上加上。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>