帶引導程序的固定高度欄

我想將所有3列的高度設置爲網格中最高列的高度。這將在逐頁的基礎上改變，所以有沒有辦法做到這一點，而沒有設置實際的min-height值？帶引導程序的固定高度欄

/* Latest compiled and minified CSS included as External Resource*/ 
 

 
/* Optional theme */ 
 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 

 
body { 
 
    margin: 10px; 
 
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<div class="row"> 
 

 
<div class="col-md-4 col-sm-4 col-xs-12 portfolio-item"> 
 
<div style="background: #eaeaea; padding: 10px;"><a href="#"><img class="img-responsive" src="http://www.placehold.it/300x300" alt="" /></a> 
 
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis faucibus dui, a malesuada nibh sagittis ut. Nunc mauris velit, rutrum id lobortis nec, ornare in diam. Nullam iaculis sem non mollis fermentum. Morbi pellentesque.</p> 
 
</div> 
 
</div> 
 

 
<div class="col-md-4 col-sm-4 col-xs-12 portfolio-item"> 
 
<div style="background: #eaeaea; padding: 10px;"><a href="#"><img class="img-responsive" src="http://www.placehold.it/300x300" alt="" /></a> 
 
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis faucibus dui, a malesuada nibh sagittis ut. Nunc mauris velit, rutrum id lobortis nec, ornare in diam. Nullam.</p> 
 
</div> 
 
</div> 
 

 
<div class="col-md-4 col-sm-4 col-xs-12 portfolio-item"> 
 
<div style="background: #eaeaea; padding: 10px;"><a href="#"><img class="img-responsive" src="http://www.placehold.it/300x300" alt="" /></a> 
 
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis faucibus dui, a malesuada nibh sagittis ut. Nunc mauris velit, rutrum id lobortis nec.</p> 
 
</div> 
 
</div> 
 

 
</div>

來源

2016-03-03 michaelmcgurk

您需要使用JavaScript的.. – Hardy

[我如何使Bootstrap列的高度相同？]（http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height） –

嘗試使用引導程序4 flexgrid選項 – maioman

總的想法是，你應該檢查你感興趣的列的高度，用類似element.offsetHeight，然後應用他們最大的所有的他們與element.style.height

另一種方法是使用CSS flex模型，在這種情況下，您將不需要JavasScript

這裏是一個很幼稚的實現你想要什麼來實現的，根據您的提琴：https://jsfiddle.net/t7v5x48q/3/（請注意，我還添加了一個CSS規則，除了JS）

來源

2016-03-03 23:16:40

嗨米奇，你可能會告訴我如何用我的例子做到這一點？我不是非常好用Javascript，所以一點幫助將不勝感激。謝謝。 – michaelmcgurk

@michaelmcgurk我更新了我的答案，添加了一個小提琴，希望它有幫助 –

帶引導程序的固定高度欄

回答

相關問題