twitter bootstrap - 根据最大​​列高设置列高[重复]

Posted 2023-03-06

【中文标题】twitter bootstrap - 根据最大​​列高设置列高[重复]

【英文标题】：twitter bootstrap - setting column height based on max column height [duplicate]

【发布时间】：2017-03-21 09:12:05

【问题描述】：

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

提琴手： 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 列相同的高度。

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

【参考方案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/

【参考方案2】：

最好的方法是在父 row 和 col 上使用 display:flex;。

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

【讨论】：

@paola，display:flex 似乎在 IE 11 及更高版本中工作。其他广泛使用的 IE 版本（如 IE 9、IE10 等）呢？如果我遗漏了什么，请纠正我。

检查兼容性：caniuse.com/#feat=flexbox 部分支持 IE11 和 IE10（不适用于 IE9-）

我刚刚检查并在 IE11 中运行良好：i.imgur.com/fZljpiI.png

【参考方案3】：

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

【参考方案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：给出 col 的 id，在 javascript 中通过它们的 id 抓取所说的 DOM 元素。然后检查它们中最大的，并使用该值来设置所有的（最小）高度。