twitter引导-基于最大列高设置列高[重复]

Question

我想使所有列在一行中的高度相同。因此，一行中的所有列的高度应与具有最大高度的任何列的高度相同。

小提琴手：https://jsfiddle.net/ebwwvy6m/11/

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-2 bg-warning">
      This is a col-sm-2
      Some test content
       Some test content
        Some test content
         Some test content
    </div>
    <div class="col-sm-6 bg-success">
      .col-sm-6
    </div>
    <div class="col-sm-4 bg-info">
      .col-sm-4      
      Some test content
      Some test content
    </div>
  </div>
</div>

问题:

第2列和第3列都应展开以具有与第1列相同的高度。

如有任何帮助/建议，将不胜感激。

Answer 1

添加您自己的类并设置高度。

Answer 2

做到这一点的最好方法是在父行和ol上使用show： flex；。

工作演示。

.example {
  display: flex;
}
.example .exaple-items {
  display: flex;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row example">
    <div class="col-sm-2 bg-warning exaple-items">
      This is a col-sm-2
      Some test content
       Some test content
        Some test content
         Some test content
    </div>
    <div class="col-sm-6 bg-success exaple-items">
      .col-sm-6
    </div>
    <div class="col-sm-4 bg-info exaple-items">
      .col-sm-4      
      Some test content
      Some test content
    </div>
  </div>
</div>

Answer 3

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

将该类与行类一起添加。

<div class="container-fluid">
  <div class="row-eq-height row">
    <div class="col-sm-2 bg-warning">
      This is a col-sm-2
      Some test content
       Some test content
        Some test content
         Some test content
    </div>
    <div class="col-sm-6 bg-success">
      .col-sm-6
    </div>
    <div class="col-sm-4 bg-info">
      .col-sm-4      
      Some test content
      Some test content
    </div>
  </div>
</div>

https://jsfiddle.net/ebwwvy6m/16/