新的 Bootstrap 三个文档将网格行为解释为对于超小型设备的“始终水平”。这是什么意思？当然，在一个小型设备上，所有列都会垂直堆叠在一起吗？这里让我失望的是我（缺乏）对网格是什么的理解。
我来自非设计师的角度，并试图将许多产品迭代到响应式网格中。每行中的列数将根据显示的产品是奇数还是偶数而改变。<-- Bootstrap 和类似的东西看起来很简单，静态内容覆盖动态页面。例如，我们必须插入空<div class="col-xs*"></div>来使其达到 12 吗？
问问题
536 次
1 回答
6
“始终水平”的意思是 col-xs-* 从浮动变为堆叠没有断点。例如：
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
在此示例中，无论您使用的是手机、平板电脑还是台式机，总会有两列大小相同。对比：
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
在此示例中，列将被堆叠，直到设备的视口 >=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 的桌面断点。
于 2013-08-16T16:10:20.607 回答