html - 使多列共享 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>

我附上了一个屏幕短路以供引用。

Answer 1

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

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

然后使用<div class="row row-eq-height">而不是 <div class="row"> .

请注意 IE<10 不支持 flexbox。