如何讓Bootstrap 4列的高度一致？

Question

免責聲明。這個問題被問到過many次。但是，由於時間已經過去，現在我們已經接近Bootstrap 4發佈並提供了完整的Flexbox支持，現在是時候爲同一個問題提供新的答案。

我想創造平等柱高度與引導4.這是預期的結果的演示：

我想一個解決方案，即在所有瀏覽器上運行，由引導4.更好的支持如果沒有JS參與。一些現有的解決方案基於Bootstrap 3，有些不適用於MacOS上的Safari。

更新。似乎我做錯了研究。 Bootstrap 4默認具有相同的高度。我已經包含了帶插圖的更新圖片。你不需要做任何事情，它已經在那裏。

Answer 1

您只需要使用class="row-eq-height"與class="row"獲得等高列以前版本的引導。

但自舉4這本來就是。

check this link --http://getbootstrap.com.vn/examples/equal-height-columns/

Answer 2

等高度列是Bootstrap 4網格的默認行爲。

.col { background: red; } 
 
.col:nth-child(odd) { background: yellow; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col"> 
 
     1 of 3 
 
    </div> 
 
    <div class="col"> 
 
     1 of 3 
 
     <br> 
 
     Line 2 
 
     <br> 
 
     Line 3 
 
    </div> 
 
    <div class="col"> 
 
     1 of 3 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

您可以使用新的引導牌：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 

 
<div class="card-group"> 
 
    <div class="card"> 
 
    <img class="card-img-top" src="..." alt="Card image cap"> 
 
    <div class="card-block"> 
 
     <h4 class="card-title">Card title</h4> 
 
     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> 
 
    </div> 
 
    <div class="card-footer"> 
 
     <small class="text-muted">Last updated 3 mins ago</small> 
 
    </div> 
 
    </div> 
 
    <div class="card"> 
 
    <img class="card-img-top" src="..." alt="Card image cap"> 
 
    <div class="card-block"> 
 
     <h4 class="card-title">Card title</h4> 
 
     <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> 
 
    </div> 
 
    <div class="card-footer"> 
 
     <small class="text-muted">Last updated 3 mins ago</small> 
 
    </div> 
 
    </div> 
 
    <div class="card"> 
 
    <img class="card-img-top" src="..." alt="Card image cap"> 
 
    <div class="card-block"> 
 
     <h4 class="card-title">Card title</h4> 
 
     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> 
 
    </div> 
 
    <div class="card-footer"> 
 
     <small class="text-muted">Last updated 3 mins ago</small> 
 
    </div> 
 
    </div> 
 
</div>

鏈接：Click here

問候，

Answer 4

因爲它會自動訂購具有動態內容的高度而不使用CSS。

使用這個插件，你只需要調用下面的方法：

$('.yourelements').equalHeights(); 

所以你可以想即使項目框

的Docu：https://github.com/mattbanks/jQuery.equalHeights

例子：https://codepen.io/micahgodbolt/pen/FgqLc