<分区>
我试图使用 Bootstrap 4 (alpha 6) 网格系统。我进行了以下测试,使用“maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css”
<body>
<div class="container-fluid">
<div class="row">
<div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">1</div>
<div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">2</div>
<div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">3</div>
<div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">4</div>
<div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">5</div>
<div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">6</div>
<div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">7</div>
<div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">8</div>
<div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">9</div>
<div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">10</div>
<div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">11</div>
<div style="border-style: solid" class="col-1 col-sm-2 col-md-3 col-lg-4 col-xl-6">12</div>
</div>
</div>
</body>
是的,这些列与您通常预期的相反,但它使您更容易看到应用的断点。在 PC 浏览器中,断点在我调整屏幕大小时起作用 - 在窄屏幕上是单行,当我全宽时是 6 行。
在我的 iPhone 5 (640×1136) 上,我希望看到根据旋转应用 col-sm-2 和 col-lg-4。相反,我所看到的只是 col-md-3 配置。 Android (Amazon Fire) 也是如此。
总而言之,当我在 iphone5 上使用 bootstrap 网格时,无论旋转如何,我得到的只是中等视口(viewport)。我是做错了什么还是“中等”是手机的标准视口(viewport)?