我正在使用 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 行和巨大的框。
最佳答案
您正在使用 .col-md-6
,它适用于中等尺寸的屏幕。如果您希望将它们以相同的方式放置在手机(超小型设备)上,则需要改用 .col-xs-6
。
有关更多信息,您可以阅读 bootstrap documentation关于如何设置。
关于html - 较小屏幕上的 Bootstrap 布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19370742/