自动调整bootstrap中的最大高度

Question

我是bootstrap的新手。我使用三列，每列有span4，以显示一些突出显示的内容。盒子有背景颜色和坚实的边框。如何将三个列中的所有三列的高度设置为最大高度列？

<div class="row grid-row">
 <div class="span4">
  <div class="widget-header">
    <h3>Tutoring &amp; Training Centers</h3>
  </div>
  <div class="widget-body">
    <p>World’s leading tutoring centers use to create custom diagnostic analysis to improve student performance, increase efficiency, and grow customer base.</p>
<p class="center"></p>
  </div>
 </div>
 <div class="span4">
  <div class="widget-header">
    <h3>Tutoring &amp; Training Centers</h3>
  </div>
  <div class="widget-body">
    <p>World’s leading tutoring centers use to create custom diagnostic analysis to improve student performance.</p>
<p class="center"></p>
  </div>
 </div>
 <div class="span4">
  <div class="widget-header">
    <h3>Tutoring &amp; Training Centers</h3>
  </div>
  <div class="widget-body">
    <p>World’s leading tutoring centers use to create custom diagnostic .</p>
<p class="center"></p>
  </div>
 </div>
</div>

我附上了一个关于refrense的屏幕短片。

Answer 1

在Bootstrap v3.2.0中使用an official experimental example将有CSS flexbox个相同高度的列。这是它的要点：

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

然后使用<div class="row row-eq-height">代替<div class="row">。

注意IE＆lt; 10。

中不支持flexbox

Answer 2

使用jQuery

var maxHeight = 0;

$("div").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$("div").height(maxHeight);

With CSS

另请查看：How to create equal height columns in pure CSS

Answer 3

这会对你有所帮助

Html：

<div class="main">
    <div class="box">a</div>
    <div class="box">b</div>    
    <div class="box" style="height:100px;">c</div>  
</div>

Css：

.main{
    height:auto;
    display:table;

}
.box{
    height:100%;
    width:80px;
    display:table-cell;
    background:gray;
    border:1px solid red
}

Demo