在ipad bootstrap 3上显示3个cols的问题

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循环中生成的，所以循环结束时的整体HTML将是这样的

<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>

当我在手机上查看它时，它们每行堆叠一次看起来很棒，我在ipad上查看时出现的问题如下所示

他们各自重叠，每个人之间应该有一个像这样的空间

我无法弄清楚HTML有什么问题？如果因为空间这样做我怎么能让它每行包装两个产品？

**更新** 下面是在ipad上查看时使用col-md-4 col-md-6提到的结果

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>