在 ipad bootstrap 上显示 3 列的问题 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 循环中生成的，因此当循环结束时，整体 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>

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

他们一个接一个重叠，像这样每个之间应该有一个space

我不知道 HTML 有什么问题？如果它这样做是因为 space 我怎样才能让它每行包装两个产品？

** 更新** 以下是在 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>

在 ipad bootstrap 上显示 3 列的问题 3

Issue displaying 3 cols on ipad bootstrap 3

html

twitter-bootstrap-3