1

我正在使用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 行和巨大的框。

4

2 回答 2

1

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

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

于 2013-10-14T23:15:04.890 回答
0

In old bootstrap 2.3.2 grid syntax look like this

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

class="row-fluid" used when we want to get a responsive design, but in this case all (.col-md-6 - in new bootstrap or .span6 in old bootstrap) element display as block element with width=100% Look at old 2.3.2 bootstrap grid in developers tools an re-size window width. And look at this new 3 bootstrap grid in developers tools an re-size window width. Сompare and understand everything.

于 2013-10-15T00:00:16.250 回答