自举柱的高度更好地流动

我想让列占用剩余空间而不是等待列的末尾。是在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

自举柱的高度更好地流动

回答

相关问题