html - twitter bootstrap - 根据最大列高设置列高

<分区>

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

fiddler : 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 列相同的高度。

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

最佳答案

.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/

关于html - twitter bootstrap - 根据最大列高设置列高，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40475121/