自举列高度

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

希望这有助于清除您的理解！