自舉列高度

Question

我正在學習Bootstrap並希望它能使建築更具吸引力的頁面設計對我更簡單。

我努力理解這兩個例子：

引導3：http://codepen.io/rhutchinson/pen/WpxvWO

自舉4：http://codepen.io/rhutchinson/pen/aJZvKb

由於這些比引導用的版本相同其它，我假設將列高度延伸到.row的高度是Bootstrap 4的新功能。

是否有任何方法來複制一個版本的行爲在使用其他版本的同時？如果是這樣，那麼最好的方法是什麼呢？

我想了解這些維度行爲，以便給自己一個更好的前端開發概念，這對我來說不像後端腳本的邏輯那樣自然。

Answer 1

是的same column height is native support在bootstrap 4中，因爲引導程序4使用flex box。

您可以輕鬆地達到同樣的行爲，如果你使用柔性的引導3通過使用下面的example--

img { 
 
    border-radius: 50%; 
 
} 
 

 
.bord { 
 
    border-style: solid; 
 
} 
 

 
.row-eq-height { 
 
    display: flex; 
 
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div class="row row-eq-height"> 
 
     <div class="col-sm-3 text-center bord"> 
 
     <img src="http://placehold.it/140x140" class="center-block" /> 
 
     </div> 
 
     <div class="col-sm-6 text-center bord"> 
 
     <p>Some text</p> 
 
     </div> 
 
     <div class="col-sm-3 text-center bord"> 
 
     <img src="http://placehold.it/140x140" class="center-block" /> 
 
     </div> 
 
    </div> 
 
</div>

注意

正如@ZimSystems提到display: flex;適用於全高度，但會打破Bootstrap 3行和列的響應行爲。

Learn about flexbox here

Learn about the above example of .row-eq-height here

希望這有助於清除您的理解！