問題顯示在iPad上bootstap 3周的cols 3

Question

我有以下的HTML

<div class="container"> 
    <div class="row col-xs-12"> 
      <div class="col-sm-4"> 
       <div class="boxTop"></div> 
       <div class="box"> 
        <img src="/Content/Images/YogurtImages_280x135/ProductPicture.png" width="280" height="135" alt="Danone Ultimate blueberry yogurt" class="productMarginTop"> 

        <p style="display: block; height: 40px; text-align: center; line-height: 45px; color: #00386a; font-size: 24px; font-family: Foco-Regular;"> 
         BLUEBERRY 
        </p> 
        <div style="border-top: 1px solid #00386a; width: 85%; margin:0 auto"></div> 
        <h5 style="color: #00386a; font-size:19px; cursor:pointer; width:260px" class="text-center" id="nutritionInfo" data-productid="1" data-colorcode="#00386a" data-productname="BLUEBERRY"> 
         <span class="text-center" style="margin-left:14%">NUTRITIONAL INFO</span> <span class="glyphicon glyphicon-chevron-right pull-right"></span> 
        </h5> 
        <div style="border-top: 1px solid #00386a; width: 85%; margin:0 auto"></div> 
        <h5 class="text-center" id="findStore" style="width:260px"> 
         <a data-toggle="collapse" data-parent="#accordion" href="#1" aria-expanded="true" aria-controls="1" style="color: #00386a;font-size:19px;text-decoration: none;" class="text-center"> 
          <span class="text-center" style="margin-left:14%">FIND A STORE</span> <span id="chevvy" class="glyphicon glyphicon-chevron-down pull-right"></span> 
         </a> 
        </h5> 
        <div id="1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 
         <div class="panel-body"> 
           <p class="text-center" style="color: #00386a"> 
            Woolworths 
           </p> 
           <p class="text-center" style="color: #00386a"> 
            Independent Retailers 
           </p> 
           <p class="text-center" style="color: #00386a"> 
            Aldi 
           </p> 
         </div> 
        </div> 
        <div style="border-top: 1px solid #00386a; width: 85%; margin:0 auto"></div> 
       </div> 
       <div class="boxBtm"></div> 
      </div> 
     </div> 
</div> 

以上是在foreach循環中產生，所以當循環完成會是這樣的

<div class="row col-xs-12"> 
    <div class="col-sm-4"></div> 
    <div class="col-sm-4"></div> 
    <div class="col-sm-4"></div> 
</div> 

<div class="row col-xs-12"> 
    <div class="col-sm-4"></div> 
    <div class="col-sm-4"></div> 
    <div class="col-sm-4"></div> 
</div> 

整體HTML

當我查看該手機在堆疊每行看起來偉大的，我有這個問題上了一臺iPad觀看了這一點表現爲以下

​​

他們在研磨每過，應該有每一個這樣的

我無法弄清楚什麼是錯的HTML之間的空間？如果因爲空間而這樣做，我怎麼能讓它每行包裝兩個產品？

** **更新下面 使用是COL-MD-4 COL-MD-6在iPad上觀看時

Answer 1

嘗試改變

<div class="row col-xs-12"> 
<div class="col-sm-4"></div> 
<div class="col-sm-4"></div> 
<div class="col-sm-4"></div> 
</div> 

<div class="row col-xs-12"> 
<div class="col-sm-4"></div> 
<div class="col-sm-4"></div> 
<div class="col-sm-4"></div> 
</div> 

到提到什麼樣的結果

<div class="row"> 
<div class="col-xs-12 col-sm-6 col-md-4"></div> 
<div class="col-xs-4 col-sm-6 col-md-4"></div> 
<div class="col-xs-4 col-sm-6 col-md-4"></div> 
<div class="col-xs-4 col-sm-6 col-md-4"></div> 
<div class="col-xs-12 col-sm-6 col-md-4"></div> 
<div class="col-xs-12 col-sm-6 col-md-4"></div> 
</div>