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