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

Question

我希望连续将所有列设置为相同的高度。因此，一行中的所有列应与任何具有最大高度的列具有相同的高度。

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列具有相同的高度。

非常感谢任何帮助/建议。

Answer 1

执行此操作的最佳方法是在父display:flex;和row上使用 col 。

工作Demo。

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

由于flextbox是新的CSS功能检查浏览器兼容性：caniuse.com

并使用 vendor prefix ：

.example {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

如果您想了解有关display:flex;的更多信息，请阅读：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

P.S。 new bootstrap v4将集成此功能。

Answer 2

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

Answer 3

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

Answer 4

选项1（对于layzy）

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-2 bg-warning my-super-class">
      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 my-super-class">
      .col-sm-6
    </div>
    <div class="col-sm-4 bg-info my-super-class">
      .col-sm-4      
      Some test content
      Some test content
    </div>
  </div>
</div>


.my-super-class {
  min-height: 12em;
}

选项2：给出col的id，用JavaScript中的Id来抓取DOMelement。然后检查它们中最大的一个，并使用该值设置所有的（min-）高度。