Question

我看到了一个视频，作者只会使用

<div class="col-lg-12">
     some content
</div>

在div.container和div.row内。如果这是该行中唯一的项目，那么目的是什么？我想如果你想要占用整行的东西，你可能只需将它列为col-xs-12，这样它就会影响所有的屏幕尺寸。但如果它是唯一的项目，那么它不会自动占据所有12列？那么为什么要使用它以及为什么要使用lg？

Answer 1

<div class="col-lg-12/>
  some content
</div>

这基本上意味着当页面显示在大型设备上时，div应该获取整个宽度（根据官方文档，最大宽度为1200px的设备）。

为了更好地理解这一点，如果你必须在较小的屏幕上显示相同的div，宽度的一半，那么你可以写如下：

 <div class="col-xs-6/>
   some content
 </div>

或

  <div class="col-lg-12 col-xs-6/>
   some content
  </div>

（注意：以上两个代码都有相同的最终结果）。

同样，如果您愿意，您可以指定如何为较小型和中型设备显示分区。

希望这会有所帮助：）

Answer 2

这只是为了保持一致。无论视口如何，.col-xs-12和.col-xl-12都会显得视觉相同。

Answer 3

网格系统只不过是特定屏幕宽度div的宽度。当块的内容超过假定占用的宽度时，此宽度生效。

div width以及media queries实际上就是这些col-*-*。因此，当您的屏幕宽度超过1200像素时，col-lg-*会发挥作用。但是，如果您的内容是一行，那么您使用的col-*-12无关紧要。

假设您的整个HTML页面中只有一行，并且您始终希望它是100％。因此，如果您将其置于col-xs-12或col-sm-12或col-md-12或col-lg-12内，则不会有任何需要。他们都将占据width:100%。

网格系统只提供易于响应的网络开发。即使您可以定义自己的网格系统。

假设您将此col-lg-12宽度组合为另一类col-md-6，那么对于小于1200px的屏幕宽度，它只会占据页面宽度的50％。类似地，对于其他类，只是为响应式Web设计对齐和堆叠内容的方法。

希望这有帮助。