不同的cols在引导中有什么不同？

Question

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

col 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的目标是大型桌面。

两个网格都工作得很完美，都是responsive和works。有人能解释一下这两种方法的区别吗。

1. 我想知道这两个人在common里是什么，他们在哪里differ？
2. 为什么要在first方法中构建网格布局，为什么要选择second布局？

Answer 1

回答你的问题，它们是一样的。这些类因屏幕大小不同而不同。在小屏幕大小中，您可能会看到与大屏幕大小不同的东西，这取决于您想要的列的数量。更好地说，您可以组合这些类以保持响应性布局响应。我将附上下面的演示，供您查看。但是，首先让我们看一下下面的布局：

HTML：

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

CSS：

.blue2 {
    background:blue;
    width: auto;
    height: 200px;
}
.red2 {
    background:red;
    width: auto;
    height: 200px;
}

下面将为大屏幕生成一个特定的布局，但对于较小的屏幕则不会遵循网格系统。最好从下一个例子中看到这一点：

HTML：

<div class="row">
    <div class=" col-lg-6 col-sm-6 col-md-6 col-xs-6 blue"></div>
    <div class=" col-lg-6 col-sm-6 col-md-6 col-xs-6  red"></div>
</div>

CSS：

.blue {
    background:blue;
    width: auto;
    height: 200px;
}
.red {
    background:red;
    width: auto;
    height: 200px;
}

这是完全相同的CSS，但我增加了更多的类，以涵盖不同的屏幕大小。这些类是：col-md-6和col-sm-6。连同上面演示的原始类：col-lg-6，它们将通过每个屏幕大小来维护精确的布局(我甚至在这个设计中包括了额外的小)。

最好通过下面的演示来了解这一点。只需在右下角播放屏幕大小，就会更有意义。

Answer 2

网格系统的目的是使用媒体查询针对不同的设备屏幕。

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

<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上，宽度为≥1200≥(例如桌面)，四个div将位于同一条线上。
• 在小屏幕col-sm-x上，宽度为≥750≥(例如平板)，您将有两行分别包含两个div
• 在超大屏幕col-xs-x上，其宽度低于750 On (例如电话)，每个div将位于一条单独的行上。

还有一个col-md-x类，用于将宽度为≥750≥的设备作为目标，但由于不在此示例中，col-sm-6将被应用。

您可以在文档上阅读更多关于引导媒体查询的信息。

编辑：媒体查询实际上针对窗口的大小。因此，当您想要查看页面将如何出现在较小/较大的设备上时，只需调整浏览器的大小即可。