这在Bootstrap 3文档中意味着什么？

Question

在关于网格系统的Bootstrap 3文档的此页面中（在网格选项表中）： http://getbootstrap.com/css/#grid-options

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

有人可以解释一下这意味着什么，甚至可以举个例子吗？

谢谢！

Answer 1

“始终水平”适用于额外的小列（.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>

“折叠开始，水平高于断点”适用于小型（sm），中型（md）和大型（lg）列类：

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

您可以通过减少浏览器宽度来尝试文档中的示例（在您的链接上）。

Answer 2

这是历史上最糟糕的定义！

定义：

Collapsed to start

他们想说的是

  

列宽12/12

定义：

horizontal above breakpoints

他们想说的是

  

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

他们不能说的是他们实施了ccs媒体查询的瀑布-aka级联模型：

1. 首先将所有列定义为12/12（折叠或移动优先方法）
2. 然后，媒体查询从较小的断点到较高的断点：

屏幕小吗？适用于小屏幕的规则

是屏幕媒体？适用中画面规则

屏幕大吗？适用于大屏幕的规则

如果您在实施此类网格系统时没有在每个查询中定义上限，那么对于大屏幕所有查询将适用，获胜者为最后一个（瀑布模型）！

当然在这样的＆＃34;废话（？）＆＃34; - 没有上限 - 下一个查询应该覆盖它的祖先的规则意味着无休止的重复代码！

在bootstrap中，它的查询中有没有上限所以写得像：

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

我们可以在手机（＆lt; 768）中看到2个相等的列，在小型（＆gt; 768）设备中看到2个堆叠的列。

但为什么呢？因为第一列有一个类col-sm-8，但第二列中缺少一个规则，瀑布模型已经应用了宽度6/12！ （按照上面的媒体查询问题：小屏幕肯定是特别小，媒体肯定是小而小等。）

另一方面，如果开发人员已经以两种尺寸（大写和小写）实施查询，那么No.2列将在没有正确的类的情况下被定义，并且这意味着将保留12/12移动优先方法！

最重要的是，当媒体查询中没有上限时，设计师必须在网格中提供更少的类，但行为不是那么直观！

Answer 3

这意味着如果你使用col-xs类，你的网格将在所有屏幕上都是水平的，而如果你使用col-sm，col-md，col-lg类，它将在屏幕宽度上大于水平分别为768px，992px，1170px，否则它们将被折叠。

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

Answer 4

你并不是唯一感到困惑的人：https://github.com/twbs/bootstrap/issues/9365

我也觉得这有点令人困惑。在我看来，了解网格系统如何工作的最佳方法是查看表格正下方的示例，并调整浏览器的大小。理想情况下，您还希望在智能手机上查看此示例（如果有的话）。

Answer 5

我认为选择的答案很糟糕。关于网格系统的Bootstrap 3文档也有点令人困惑。所以：

• ＆＃34;始终水平＆＃34;对于额外的小列（col-xs-）：意味着如果使用col-xs-类，那么列将是 放在一排，一排在另一排，无论大小如何 屏幕或设备。

• ＆＃34;折叠开始，水平高于断点＆＃34;对于其余的类（sm，md，lg）：表示如果使用col-md-类，然后如果屏幕的大小小于992px（md类的下限），则列将被放置在另一个之下（就像它们是行一样）。如果屏幕的大小大于992px，那么它们将被放置在一行中，一个放在另一行中。

这里的关键点是理解＆＃34;水平＆＃34; 是指列位于<row>元素内的方式， NOT 他们的形状。