使用引导程序使每列内的元素具有相同的高度

Question

是否可以使用引导程序使橙色区域具有相同的高度，如下图1所示？即使里面的段落有不同的长度？我目前使用的结构如下，结果如图2所示。

    <div class="row">
      <div class="col-sm-12 col-md-4">
        <h3></h3>
        <p></p>
      </div>
      <div class="col-sm-12 col-md-4">
        <h3></h3>
        <p></p>
      </div>
      <div class="col-sm-12 col-md-4">
        <h3></h3>
        <p></p>
      </div>
  </div>

PIC1

PIC2

Answer 1

您可以使用display: table-cell;试试这个bootply：

http://www.bootply.com/CYMv8o29K3

Answer 2

我会使用包含h3标签的附加div。您可以为此div指定最小或固定高度，以获得所需的结果。

<强> CSS

.orange {
   height: 200px;
 }      

<强> HTML

 <div class="row">
      <div class="col-sm-12 col-md-4">
        <div class="orange">
          <h3></h3>
        </div>
        <p></p>
      </div>
      <div class="col-sm-12 col-md-4">
        <div class="orange">
          <h3></h3>
        </div>
        <p></p>
      </div>
      <div class="col-sm-12 col-md-4">
        <div class="orange">
          <h3></h3>
        </div>
        <p></p>
      </div>
  </div>

Answer 3

您真正需要做的就是在橙色区域设置一个高度。像这样的东西可以解决这个问题。

Demo

.h3 {
    height: 150px;                /* Your height goes here */
    background-color: orange;
}

Answer 4

您可以通过不设置预定义高度来获得灵活性（如果您的文本非常长，该怎么办）。尝试使用map()函数获取最高元素的高度，并对具有相同类的所有元素使用此高度。 DEMO

Answer 5

刚刚找到一个解决这个问题的jquery插件，所以不需要在css中设置一个固定的高度。 http://filamentgroup.com/examples/equalHeights/