如何解決這個網格系統問題在引導

Question

我有一個img中的boostrap，我希望它顯示在右側，並顯示兩個行左邊的4個對象每個有兩個對象，這是從網格4列

我的HTML

<div class="row"> 
     <div class="col-md-4 col-sm-6 col-xs-12 img-container"> 
      <div class="product first wow zoomInDown " 
      data-wow-delay="0.3s" data-wow-duration="2s"> 
       <img src="images/hiro1.jpg" width="600" alt="" class="img-responsive" > 
       <h6 class="text-center">it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</h6> 
       <p>Energy</p> 
      </div> <!-- end of product--> 
     </div> <!-- end of bootstrap columns--> 

     <div class="col-md-4 col-sm-6 col-xs-12 img-container"> 
      <div class="product second wow zoomInDown " 
      data-wow-delay="0.3s" data-wow-duration="2s"> 
       <img src="images/hiro2.jpg" width="600" alt="" class="img-responsive"> 
       <h6 class="text-center">it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</h6> 
       <p>Phyto</p> 
      </div> <!-- end of product--> 
     </div> <!-- end of bootstrap columns--> 

     <div class="banner"> 
     <img src="http://placehold.it/300x450"> 

     </div> 




     <div class="clearfix"></div> 

     <div class="col-md-4 col-sm-6 col-xs-12 img-container"> 
      <div class="product second wow zoomInDown " 
      data-wow-delay="0.3s" data-wow-duration="2s"> 
       <img src="images/hiro2.jpg" width="600" alt="" class="img-responsive"> 
       <h6 class="text-center">it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</h6> 
       <p>Phyto</p> 
      </div> <!-- end of product--> 
     </div> <!-- end of bootstrap columns--> 

     <div class="col-md-4 col-sm-6 col-xs-12 img-container"> 
      <div class="product second wow zoomInDown " 
      data-wow-delay="0.3s" data-wow-duration="2s"> 
       <img src="images/hiro2.jpg" width="600" alt="" class="img-responsive"> 
       <h6 class="text-center">it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</h6> 
       <p>Phyto</p> 
      </div> <!-- end of product--> 
     </div> <!-- end of bootstrap columns--> 






    </div> <!-- end of row--> 

我的CSS

.product{ overflow: hidden; margin-bottom: 40px; position: relative; cursor: pointer; float: left;} 
.product p {position: absolute; top: 10%; left:200%; color: white; 
z-index: 2000; font-size: 20px; opacity:0; transition:all 0.5s;} 

.product h6 {position: absolute; top: 40%; left:-200%; color: white; 
z-index: 3000; font-size: 20px; opacity:0; transition:all 0.5s ; line-height: 20px; 
transition-timing-function: cubic-bezier(0.000, 0.000, 0.580, 1.000); } 

這是顯示的結果 http://i.imgur.com/2PhECdx.jpg

Answer 1

我已修改您的代碼以生成兩列，第一列包含兩列兩列。

<div class="row"> 
<div class="col-md-8 col-sm-6 col-xs-12"> 
<div class="row"> 
    <div class="col-md-6 col-sm-6 col-xs-12 img-container"> 

    </div> 

    <div class="col-md-6 col-sm-6 col-xs-12 img-container"> 

    </div> 
</div> 

<div class="row"> 
<div class="col-md-6 col-sm-6 col-xs-12 img-container"> 

    </div> 

    <div class="col-md-6 col-sm-6 col-xs-12 img-container"> 

    </div> 
</div> 
</div> 

<div class="col-md-4 col-sm-6 col-xs-12 img-container"> 

</div> 

</div> 

檢查： http://jsfiddle.net/h68hzfnc/