引導網格系統問題

Question

我無法理解一個簡單的細節。 我只是Bootstrap的新手，所以需要幫助。

我如何在Bootstrap中創建像這樣的網格系統而沒有固定的cols高度？

網絡的例子是here。

Answer 1

嘗試使用clearfix

<div class="container"> 
<div class="row"> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"><img src="//placehold.it/150x200" class="img-responsive"></div> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"><img src="//placehold.it/150x100" class="img-responsive"></div> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"><img src="//placehold.it/150x100" class="img-responsive"></div> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"><img src="//placehold.it/150x100" class="img-responsive"></div> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"><img src="//placehold.it/150x100" class="img-responsive"></div> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"><img src="//placehold.it/150x100" class="img-responsive"></div> 
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"><img src="//placehold.it/150x100" class="img-responsive"></div> 
</div> 
</div> 

http://www.bootply.com/89910

Answer 2

你可以網格組件中嵌套網格組件，如在plunkr

<div class="container"> 
    <!---Main seperation 4 cols--> 
    <div class="col-sm-4"> 

    <div class=col-sm-12> 
     <img src="//placehold.it/150x300"> 
    </div> 
    </div> 

    <!---Main seperation 8 cols--> 
    <div class="col-sm-8"> 
    <div class="row"> 
     <div class="col-sm-3 "><img src="//placehold.it/150x100"></div> 
     <div class="col-sm-3 col-sm-offset-1 "><img src="//placehold.it/150x100"></div> 
     <div class="col-sm-3 col-sm-offset-1"><img src="//placehold.it/150x100"></div> 
    </div> 
     <div class="row" style="margin-top: 15px; margin-bottom: 15px"> 
     <div class="col-sm-3 "><img src="//placehold.it/150x100"></div> 
     <div class="col-sm-3 col-sm-offset-1 "><img src="//placehold.it/150x100"></div> 
     <div class="col-sm-3 col-sm-offset-1"><img src="//placehold.it/150x100"></div> 
    </div> 
     <div class="row" > 
     <div class="col-sm-3 "><img src="//placehold.it/150x100"></div> 
     <div class="col-sm-3 col-sm-offset-1 "><img src="//placehold.it/150x100"></div> 
     <div class="col-sm-3 col-sm-offset-1"><img src="//placehold.it/150x100"></div> 
    </div> 
    </div> 

</div>