引导程序布局-我们是否应始终使用XS col类

Question

我正在阅读有关引导12网格列布局的信息。

作者使用.col-sm-8class并说在small, medium & large设备上DOM元素将占用8列空间，但在XS设备上DOM元素将占用整个宽度。请参见下图

在另一个示例中，他使用了.col-xs-4class，并说这将占用XS, SM, M & LG设备上4列的宽度。

这是否意味着我们应该始终使用xs*与设备无关的类，因为它将在更大的设备上自动调整？

经常使用xs课堂的利弊是什么？

Answer 1

Bootstrap的构建考虑了移动优先设计，这就是为什么XS列将成为默认选择的原因。在这一行：

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

在任何屏幕尺寸上，我们都会有3个等宽的列。较大的断点无关紧要，因为我们已经在默认布局下了。

但是，在此行中：

<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>

您会看到在中/大屏幕上有3列，在小屏幕和xsmall屏幕上有1列（堆叠）。

如果希望它在不同的屏幕尺寸下“折断”，请使用sm，m和l列。如果您永远不需要它来“中断”，那么一直使用xs就可以了。