Css 这在Bootstrap3文档中意味着什么？

在有关网格系统的Bootstrap 3文档的本页中（在网格选项表中）：

它说： 网格行为：始终水平，折叠开始，断点上方水平

有人能解释一下这意味着什么吗，也许可以举个例子

---

谢谢

你不是唯一感到困惑的人：

我也觉得这有点混乱。在我看来，了解网格系统如何工作的最佳方法是查看表格正下方的示例，然后调整浏览器的大小。理想情况下，如果您有智能手机，您也可以在智能手机上查看此示例。

“始终水平”适用于额外的小列（

.col xs

）：

• 无论屏幕大小如何，即使是小屏幕（例如在手机上），只要网格中有足够的空间（记住12列网格，col-xs-6+col-xs-6将适合该行；在第一行下面添加另一列），列也将始终保持水平（即保持在同一行）。参见以下900 x 768屏幕尺寸的示例：

代码示例：

<div class="row show-grid"> 
 <div class="col-xs-6">.col-xs-6</div> 
 <div class="col-xs-6">.col-xs-6</div>
 <div class="col-xs-3">.col-xs-3</div>
</div>

.col-xs-6
.col-xs-6
.col-xs-3

“折叠开始，断点上方水平”适用于小型（

sm

）、中型（

md

）和大型（

lg

）列类：

• 这意味着如果屏幕足够大，列将是水平的。但如果屏幕小于预定义的“断点”，则列将变为垂直

---

通过缩小浏览器宽度，您可以在文档中的示例（链接上）上试用它

这意味着，如果使用col xs类，网格将在所有屏幕上保持水平，而如果使用col sm、col md、col lg类，网格将在屏幕宽度分别大于768px、992px、1170px的屏幕上保持水平，否则网格将被折叠

---

例如，在同一页上查看并调整浏览器的大小。网格使用col md类。您会注意到，只要视口宽度大于992px，网格就会保持水平，低于该宽度，网格就会折叠。

我认为选择的答案陈述得很糟糕。关于网格系统的bootstrap3文档的表述方式也有点混乱。因此：

• 对于非常小的列（col xs-）“始终水平”：表示如果使用col xs-类，则列将 放置在一行中，一个挨着另一个，无论大小 屏幕或设备

• 对于其余类（sm、md、lg），“折叠开始，断点上方水平）：意味着如果使用col md-类，则如果屏幕大小小于992px（md类的下限），则列将一列置于另一列的下方（就像它们是行一样）。如果屏幕的大小大于992px，则它们将被放置在一行中，一行挨着另一行

---

这里的关键点是理解“水平”是指列在

元素中的定位方式，而不是它们的形状。

这是历史上最糟糕的定义

定义：

Collapsed to start

他们想说的是

列宽12/12

定义：

horizontal above breakpoints

他们想说的是

当屏幕达到某个宽度（断点）时，根据每列使用的类，列将变为x/12百分比，否则将保持12/12

他们没有说的是，他们实现了ccs媒体查询的瀑布式（又称级联式）模型：

首先，所有立柱均定义为12/12（折叠或移动第一进近）

然后，媒体查询从较小的断点转到较高的断点：

屏幕小吗？对小屏幕应用规则

屏幕是媒介吗？对中等屏幕应用规则

屏幕大吗？对大屏幕应用规则

如果在实现这种网格系统时，您没有在每个查询中定义一个上限，那么对于大屏幕所有查询都将适用于赢家是最后一个（瀑布模型）

当然，在这种没有上限的“胡说八道（？）”中，下一个查询应该覆盖其祖先的规则，这意味着无休止的重复代码

在bootstrap中，它的查询中没有上限，所以写下如下内容：

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

我们可以在电话（768）设备和其他设备中看到2个相等的列

但是为什么呢？因为第一列有一个类

col-sm-8

，但是第二列缺少规则，所以瀑布模型已经应用了宽度6/12！（按照上面媒体查询的问题：小屏幕当然非常小，中等屏幕当然非常小，等等）

另一方面，如果开发者实现了两种大小（上限和下限）的查询，那么如果没有合适的类，第2列将是未定义的，这意味着在mobile-first方法中仍然是12/12

归根结底，当媒体查询没有上限时，设计者必须在网格中提供更少的类，但其行为并不是那么直观