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

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

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

Answer 3

选项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：给山坳的ID，抢说一个DOMElement通过相应的ID在JavaScript。然后检查其中最大的一个，并使用该值为所有人设置（最小）高度。

Answer 4

做，这是对父row并在col使用display:flex;的最好方法。

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

附：new bootstrap v4将集成此功能。