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代替。

有关详细信息，请参阅bootstrap documentation了解如何进行设置。

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％在开发人员工具中查看at old 2.3.2 bootstrap网格，重新调整窗口宽度。在开发人员工具中查看此new 3 bootstrap grid重新调整窗口宽度。 Сompare并了解一切。

较小屏幕上的Bootstrap布局

2 个答案: