对于超小型设备，新的Bootstrap三个文档explains the grid behaviour为“始终水平”。这是什么意思？当然，在一个小型设备上，所有列都会垂直堆叠在一起？我在这里失败的是我（缺乏）对网格是什么的理解。
我是从非设计师的角度出发，试图将一些产品迭代到响应式网格中。每行中的列数将根据是否显示奇数或偶数的产品而改变。 ＆lt; - Bootstrap，在动态页面上使用静态内容似乎很简单。例如，我们是否必须插入空<div class="col-xs*"></div>以使其达到12？
答案 0 :(得分：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，所以在我们点击桌面断点（格式为＆gt; = 992）之前，col-xs会继续执行。