在较小屏幕上的引导程序布局

Question

我正在使用PhoneGap将网页构建到使用Twitter Bootstrap和Flat UI创建的应用程序中。 一切似乎都正常，但我遇到一个问题。 当我在台式机或笔记本电脑上测试网页时，布局可以很好地划分为12个部分，但是当我尝试在手机布局的同一行上放置图像或按钮时，它们会垂直放置在另一个之上。

例如，如果我在一行上有两个按钮，则两个按钮都将拉伸到手机的宽度，并放在两个单独的行上。

    <div class="row">
        <div class="col-md-6">
            <a href=".\back.html" class="btn btn-block btn-lg btn-success">BACK</a>
        </div>
        <div class="col-md-6">
            <a href=".\next.html" class="btn btn-block btn-lg btn-inverse">NEXT</a>
        </div>
    </div>

另外，我在顶部声明：

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

是否知道为什么会这样？

我想做的一件事是有6个编号为1-6的盒子供用户选择。 我想每行有2个数字并有3行。 当我尝试以这种方式实现图像（带编号的框）时，它们又被拉伸了，最终变成了6行和巨大的框。

Answer 1

您正在使用.col-md-6 ，它用于中等大小的屏幕。 如果希望将它们以相同的方式放置在电话（x小型设备）上，则需要使用.col-xs-6 。

有关更多信息，您可以阅读有关如何进行设置的引导程序文档 。

Answer 2

在旧的bootstrap 2.3.2中，网格语法如下所示

<div class="container">
    <div class="row-fluid">
        <div class="span6">left</div>
        <div class="span6">right</div>
    </div>
</div>

当我们想要获得响应式设计时使用class =“ row-fluid”，但是在这种情况下，所有元素（.col-md-6-在新的引导程序中或.span6在旧的引导程序中）都显示为宽度为100％的块元素在开发人员工具中查看旧的2.3.2引导网格，调整窗口宽度。 并在开发人员工具中查看这个新的3自举网格 ，调整窗口宽度。 谨防并了解所有内容。