Bootstrap布局 - 我们是否应该始终使用XS col class

Question

我正在阅读有关bootstrap 12网格列布局的内容。

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

在另一个示例中，他使用了.col-xs-4类，并说这将在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列（堆叠）。

如果你想要＆＃34;打破＆＃34;在不同的屏幕尺寸，您使用sm，m和l列。如果你从来不需要它来打破，＆＃34;一直使用xs很好。

Answer 2

如果您尝试定位不同的设备，则不应该只使用一个课程，例如，假设您有一个厨房，并且您希望在桌面设备上显示4个图片，而在手机上只显示一个设备

下面的例子给你一个想法。

<div class="container">
  <div class="row">
    <figure class="col-xs-12 col-sm-6 col-md-4">
      <img .../>
    </figure>
    <figure class="col-xs-12 col-sm-6 col-md-4">
      <img .../>
    </figure>
    <figure class="col-xs-12 col-sm-6 col-md-4">
      <img .../>
    </figure>
    <figure class="col-xs-12 col-sm-6 col-md-4">
      <img .../>
    </figure>
  </div>
</div>