如何在自舉中製作兩個相同高度的列？

HTML：

<div class="container-fluid"> 
    <div class="row"> 

     <div class="col-md-6"> 
      <p>Line</p> 
      <p>Line</p> 
      <p>Line</p> 
      <p>Line</p> 
      <p>Line</p> 
      <p>Line</p> 

     </div> 
     <div class="col-md-6"> 
      <p>Line2</p> 
      <p>Line2</p> 

     </div> 

    </div> 
</div>

正如你可以看到兩列是不相等的，每個人都有一個高度的內容。

我試圖讓在jsfiddle這個例子，但顯然我們沒有...但我把

我試圖導入引導但不工作

我還發現在文檔引導this例如鏈接，但未能實現它

你能幫我實現這個例子（如果可能的話在jsdfidle中）？

在此先感謝！

來源

2015-10-05 Marius

有趣的閱讀：http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks – Salketer

[如何在不指定父母的情況下強制孩子分數達到父母分數的100％高度？]（http://stackoverflow.com/questions/1122381/how-to-force-child-div-to-100-of-parents-div-without-specifying-parents-heigh） – Salketer

Bootstrap，或任何'正常'框架將不會支持這一點。此外，你不想用任何一種JavaScript來做到這一點。不，你想使用flexbox。相關文章; http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback（如果瀏覽器確實過時，只能使用JS）。 –

嘗試添加這對你的CSS：

.row [class*="col-"]{ 
    margin-bottom: -99999px; 
    padding-bottom: 99999px; 
} 

.row{ 
    overflow: hidden; 
}

https://jsfiddle.net/DTcHh/12810/

或者使用Flexbox的：

.row { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display:   flex; 
}

https://jsfiddle.net/DTcHh/12811/

來源

2015-10-05 13:06:41 martincarlin87

我認爲你不明白 divs左右必須排成一行，並且無論內容如何都有相同的高度。我們div紅色高於藍色 – Marius

如果它們必須是內聯的，而不管視口寬度如何，那麼請將col類改爲「col-xs-6」而不是「col-md-6」。 – martincarlin87

嘗試我在下面提供的其他解決方案，我遇到了類似的問題，它爲我工作得非常好，它是一個非常簡單的使用JS代碼。 – CreativePS

這個工作對我來說很好，希望這將解決您的均衡高度問題。

只是適用於你想平等的DIV類「eq_height」，包括下面的代碼在你的頁面

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

<script> 
    $(document).ready(function(){ 

    var highestBox = 0; 
     $('.container-fluid .eq_height').each(function(){ 
       if($(this).height() > highestBox){ 
       highestBox = $(this).height(); 
     } 
    });  
    $('.container-fluid .eq_height').height(highestBox); 

}); 
</script>

這將需要最大div的高度，並根據它均衡。

來源

2015-10-05 13:08:26 CreativePS

我們可以使用它並保持內聯樣式。 – CreativePS

如何在自舉中製作兩個相同高度的列？

回答

相關問題