html - 较小屏幕上的 Bootstrap 布局

Question

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

例如，如果我在一行中有两个按钮，那么这两个按钮将被拉伸(stretch)到手机的宽度并放置在两个单独的行中。

    <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 行。当我尝试以这种方式实现图像(带编号的框)时，它们再次被拉伸(stretch)，最终变成了 6 行和巨大的框。

Answer 1

您正在使用 .col-md-6，它适用于中等尺寸的屏幕。如果您希望将它们以相同的方式放置在手机(超小型设备)上，则需要改用 .col-xs-6。

有关更多信息，您可以阅读 bootstrap documentation关于如何设置。