html - 页面无法在 Ipad bootstrap 3 上正确显示

Question

我有以下 HTML

 <div class="row col-xs-12 margin0">
    <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="boxTop"></div>
        <div class="box" id="panel1" style="height:280px">
                <div class="row col-xs-12 margin0" >
                        <div class="col-md-6 col-xs-6">
                            <img src="/Content/Images/Lab/black_cherries.png" data-id="1" alt="black_cherries.png" data-name="blackcherry" />
                        </div>
                        <div class="col-md-6 col-xs-6">
                            <img src="/Content/Images/Lab/coconut.png" data-id="2" alt="coconut.png" data-name="coconut" />
                        </div>
                </div>
                <div class="clearfix"></div>
                <div class="marginBottom10 visible-xs-block"></div>
                <div class="row col-xs-12 margin0">
                        <div class="col-md-6 col-xs-6">
                            <img src="/Content/Images/Lab/mango.png" data-id="3" alt="mango.png" data-name="mango" />
                        </div>
                        <div class="col-md-6 col-xs-6">
                            <img src="/Content/Images/Lab/strawberries.png" data-id="4" alt="strawberries.png" data-name="strawberries" />
                        </div>
                </div>
                <div class="clearfix"></div>
                <div class="marginBottom10 visible-xs-block"></div>
        </div>
        <div class="boxBtm"></div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-1">
        <img src="/Content/Images/Lab/plus.png" />
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="boxTop"></div>
        <div class="box" id="panel2" style="height:280px">
                <div class="row col-xs-12 margin0">
                        <div class="col-md-6 col-xs-6">
                            <img src="/Content/Images/Lab/chocolate.png" data-id="1" alt="chocolate.png" data-name="chocolate" />
                        </div>
                        <div class="col-md-6 col-xs-6">
                            <img src="/Content/Images/Lab/cinnamon.png" data-id="2" alt="cinnamon.png" data-name="cinnamon" />
                        </div>
                </div>
                <div class="clearfix"></div>
                <div class="marginBottom10 visible-xs-block"></div>
                <div class="row col-xs-12 margin0">
                        <div class="col-md-6 col-xs-6">
                            <img src="/Content/Images/Lab/honey.png" data-id="3" alt="honey.png" data-name="honey" />
                        </div>
                        <div class="col-md-6 col-xs-6">
                            <img src="/Content/Images/Lab/vanilla.png" data-id="4" alt="vanilla.png" data-name="vanilla" />
                        </div>
                </div>
                <div class="clearfix"></div>
                <div class="marginBottom10 visible-xs-block"></div>
        </div>
        <div class="boxBtm"></div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-1">
        <img src="/Content/Images/Lab/equals.png" />
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="boxTop"></div>
        <div class="box" style="height:280px">
            <p style="font-family: Foco-Regular; display: none; text-transform: uppercase;" id="combinationHeader" class="text-center"></p>
            <img src="" width="260" height="222" alt="" id="combinationImage" class="displaynone">
        </div>
        <div class="boxBtm"></div>
    </div>
</div>

在浏览器中显示是这样的

在移动和桌面上查看时一切正常，但是当我将浏览器最小化到 ipad 屏幕时，它呈现如下

理想情况下我希望它堆叠，所以第一行是

• 第一行 = 面板 +
• 第二行 = 面板 =
• 第三行 = 面板

我敢肯定，对于 bootstrap master 来说这可能是一个简单的修复。

Answer 1

我已经设法让它工作了，在 firebug 中玩弄了 .col 之后我应用了最终结果

col-md-12 col-md-1

到加号和等于图像，它现在按预期显示。