自舉柱的高度更好地流動

我想讓列佔用剩餘空間而不是等待列的末尾。是在col-lg-6上使用兩個div的最佳方法，並將cols設置爲col-lg-12？只是想確保我正在使用引導程序，並在早期擺脫任何不良習慣。它會更容易在畫面自舉柱的高度更好地流動

我當前視圖

預期的結果顯示

2017-04-13 Bish25

只有這樣，才能做到這一點是一個jQuery pluging叫**同位素* *（或** masonery **）。
我更喜歡同位素> http://isotope.metafizzy.co/layout-modes/fitcolumns.html – Roy

[使引導列佔用最少的垂直空間]（http://stackoverflow.com/questions/32272964/ make-bootstrap-columns-take-up-the-vertical-space） – Abhitalks

似乎你需要砌體網格。我發現了一篇關於該文章的文章（https://www.sitepoint.com/bootstrap-tabs-play-nice-with-masonry/） – stojkosd

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 

<div class="container"> 

    <div class="row"> 
    <div class="col-md-6" style="border:1px solid #777777;"> 
     <div class="row"> 
     <div class="col-md-12" style="border:1px solid #777777;height:100px;"> 
     </div> 
     <div class="col-md-12" style="border:1px solid #777777;height:140px;"> 
     </div> 
     </div> 
    </div> 
    <div class="col-md-6" style="border:1px solid #777777;"> 
     <div class="row"> 
     <div class="col-md-12" style="border:1px solid #777777;height:150px;"> 
     </div> 
     <div class="col-md-12" style="border:1px solid #777777;height:100px;"> 
     </div> 
     </div> 
    </div> 

    </div> 
</div> 

</body> 
</html>

來源

2017-04-13 10:32:15

自舉柱的高度更好地流動

回答

相關問題