Question

我是Bootstrap的新手，我无法根据设备分辨率让我的布局工作。我现在正在测试使用Apple设备，但是当我在iPhone上打开我的页面时，我希望我的格式为XS并在2列中显示我的信息。如果设备是SM或更大，我希望我的信息显示在4列。在我的下面的示例中，我的iPhone 5s显示了4列中的信息（看着垂直放置的显示器，顶部/底部的长路），而不是2.我做错了什么？

<div class="panel panel-default">
    <div class="panel-heading"Panel Header</div>
    <div class="panel-body">
        <div class="row">
                <div class="col-xs-4 col-sm-2 text-right">First:</div>
                <div class="col-xs-8 col-sm-4 text-left">John</div>
                <div class="col-xs-4 col-sm-2 text-right">Home:</div>
                <div class="col-xs-8 col-sm-4 text-left">905-555-1111</div>
        </div>
        <div class="row">
                <div class="col-xs-4 col-sm-2 text-right">Last:</div>
                <div class="col-xs-8 col-sm-4 text-left">Smith</div>
                <div class="col-xs-4 col-sm-2 text-right">Work:</div>
                <div class="col-xs-8 col-sm-4 text-left">905-555-2222</div>
        </div>
    </div> <!-- panel body END -->
</div> <!-- panel END -->

Sample in jsfiddle

Answer 1

缺少元视口时会发生这种情况：

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

无法使网格大小在设备上运行

1 个答案: