Question

我试图使用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（亚马逊之火）也是如此。

总而言之，当我在iphone5上使用自举网格时，无论旋转如何，我得到的只是中视口。我做错了什么或者是“中等”手机的标准视口？

Answer 1

如此other question中所述，添加元视口以在移动设备上正确缩放页面：

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

iPhone上的Bootstrap网格系统

1 个答案: