css - Bootstrap 中各种列有何不同

Question

我有一个关于 bootstrap 网格系统的非常基本的问题。我已经阅读了文档和教程，但这部分并没有进入我的脑海。

col-sm-6

<div class="container">
  <div class="row">
    <div class="col-sm-6">
    </div>
     <div class="col-sm-6">
    </div>
  </div>
</div>

col-lg-6

<div class="container">
  <div class="row">
    <div class="col-lg-6">
    </div>
     <div class="col-lg-6">
    </div>
  </div>
</div>

1. sm 中型和表格目标
2. lg 目标是更大的桌面。

两个网格都完美地工作，都响应并且都工作完美。谁能解释一下这两种方法的区别。

1. 我想了解这两个在 common 中的作用以及它们在哪里 不同?
2. 为什么要在 first 方法中构建网格布局，并且 为什么会选择第二个？

Answer 1

网格系统旨在使用 Media Queries 针对不同的设备屏幕.

作为一个例子更清楚，让我们分析一下这个:

<div class="container">
  <div class="row">
    <div class="col-lg-3 col-sm-6 col-xs-12">
    </div>
    <div class="col-lg-3 col-sm-6 col-xs-12">
    </div>
    <div class="col-lg-3 col-sm-6 col-xs-12">
    </div>
    <div class="col-lg-3 col-sm-6 col-xs-12">
    </div>
  </div>
</div>

首先要知道的是，Bootstrap 有一个12 列 的网格。 当您添加类 col-lg-x 时，x 可以是 1 和 12 之间的数字，它表示您想要元素的列数填写。

• 在大屏幕 col-lg-x 上，宽度为 ≥ 1200px(例如桌面)，四个 div 将在同一行。<
• 在宽度为 ≥ 750px 的小屏幕 col-sm-x 上(例如平板电脑)，您将有两行，每行包含两个 div
• 在超小屏幕 col-xs-x 上，宽度小于 750 像素(例如手机)，每个 div 将在单独的一行上。<

还有一个 col-md-x 类用于定位宽度为 ≥ 750px 的设备，但由于它不在此示例中，因此 col-sm -6 将改为适用。

您可以在 documentation 上阅读有关Bootstrap 媒体查询 的更多信息.

编辑: 媒体查询实际上以窗口的大小为目标。因此，当您想查看您的页面在更小/更大设备上的显示效果时，您只需调整您的浏览器。