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>

问题：

第二列和第三列应该扩展到与第一列具有相同的高度。

非常感谢您的帮助和建议。

- JGV

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

- Yuri Ramos

Answer 2

最好的方法是在父元素 row 和子元素 col 上使用 display: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>

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

并使用厂商前缀：

.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将集成此功能。

- paolobasso

---

@paola，display:flex在IE 11及以上版本中似乎可以正常工作。那么其他广泛使用的IE版本（如IE 9、IE10等）呢？如果我漏掉了什么，请纠正我。 - JGV

请在此处检查兼容性：http://caniuse.com/#feat=flexbox 它在IE11和IE10中部分支持（在IE9及以下版本中无法使用） - paolobasso

我刚刚检查了一下，在IE11中运行得非常好：http://i.imgur.com/fZljpiI.png - paolobasso

Answer 3

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

- Emilio

Answer 4

选项1（适用于懒人）

<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：给出列的ID，在JavaScript中通过其ID获取该DOM元素。然后检查它们中最大的一个，并使用该值设置所有列的（最小）高度。

- Flummox - don't be evil SE