引導列在col-xs-6上跳過一行

Question

我有一個包含四個項目的引導程序網格。我的問題是位置3中的項目跳轉到新行並且不顯示網格佈局。

This is a screen shot of what is produced with the following code

<!-- Position One --> 
    <div class="col-xs-6 col-sm-6 col-md-3"> 
     <div class="stock-grid-item"> 
      <a href="item1.html"> 
       <img src="/images/image1.jpg" alt="" /> 
      </a> 
     </div> 

     <div class="stock-grid-details"> 
      <p class="name"><a href="item1.html">Item One Title</a></p> 
      <p class="price">$10.00</p> 
     </div> 
    </div> 

<!-- Position Two --> 
    <div class="col-xs-6 col-sm-6 col-md-3"> 
     <div class="stock-grid-item"> 
      <a href="item2.html"> 
       <img src="/images/image2.jpg" alt="" /> 
      </a> 
     </div> 

     <div class="stock-grid-details"> 
      <p class="name"><a href="item2.html">Item Two Title</a></p> 
      <p class="price">$10.00</p> 
     </div> 
    </div> 

<!-- Position Three --> 
    <div class="col-xs-6 col-sm-6 col-md-3"> 
     <div class="stock-grid-item"> 
      <a href="item3.html"> 
       <img src="/images/image3.jpg" alt="" /> 
      </a> 
     </div> 

     <div class="stock-grid-details"> 
      <p class="name"><a href="item3.html">Item Three Title</a></p> 
      <p class="price">$10.00</p> 
     </div> 
    </div> 

<!-- Position Four --> 
    <div class="col-xs-6 col-sm-6 col-md-3"> 
     <div class="stock-grid-item"> 
      <a href="item4.html"> 
       <img src="/images/image4.jpg" alt="" /> 
      </a> 
     </div> 

     <div class="stock-grid-details"> 
      <p class="name"><a href="item4.html">Item Two Title</a></p> 
      <p class="price">$10.00</p> 
     </div> 
    </div> 

Answer 1

嘗試包裏面這個代碼。

<div class="container"> 
    <div class="row"> 
     // your codes here 
    </div> 
</div> 

此外，我對您的代碼進行了一些調整，以消除不當使用標籤。

看到這個jsFiddle