css - "Horizontal at all times"是什么意思？

Question

新的Bootstrap 三个文档explains the grid behaviour作为超小型设备的“始终水平”。这是什么意思？在小型设备上，所有列肯定会垂直堆叠在一起吗？在这里让我失望的是我(缺乏)对网格是什么的理解。

我是从非设计师的 Angular 出发，并尝试将大量产品迭代到响应式网格中。每行中的列数将根据显示的产品数量是奇数还是偶数而变化。 <-- Bootstrap 和类似的东西看起来很简单，动态页面上有静态内容。例如，我们是否必须插入空的 <div class="col-xs*"></div>使其达到 12？

Answer 1

“始终水平”的意思是没有断点，col-xs-* 会从 float 变为堆叠。例如:

<div class="col-xs-6"></div>
<div class="col-xs-6"></div>

在此示例中，无论您使用的是手机、平板电脑还是台式机，总会有两列大小相等。对比一下:

<div class="col-sm-6"></div>
<div class="col-sm-6"></div>

在此示例中，列将堆叠直到设备的视口(viewport)>=768，此时它将切换为两列大小相等。

您可能会问自己的问题是“为什么会有所有这些变化？”好吧，这些选项让我们能够在各种设备上自定义布局，而无需在 CSS 中动手。例如，如果我希望在手机上有两个相等的列，但在平板电脑和更高版本上按 75/25 拆分，我会执行以下操作:

<div class="col-xs-6 col-sm-8"></div>
<div class="col-xs-6 col-sm-4"></div>

如果你想在手机上堆叠，在平板电脑上相等，在桌面上 75/25，那么这样做:

<div class="col-sm-6 col-md-8"></div>
<div class="col-sm-6 col-md-4"></div>

因为您没有为手机明确指定网格，所以它将恢复为堆叠。

为了获得坚实的感觉，将一些简单的网格放在一起，然后开始调整浏览器的大小。您应该能够比在文档中更容易地看到它是如何变化的。

编辑

考虑另一个可能感兴趣的示例:手机和平板电脑上的两列相等，然后是 75/25 和台式机。代码:

<div class="col-xs-6 col-md-8"></div>
<div class="col-xs-6 col-md-4"></div>

这实际上是“始终水平”的一个很好的说明。因为我们没有指定 col-sm，col-xs 将继续执行，直到我们到达桌面断点，该断点设置为 >=992。