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>

sm适用于中型和桌子的目标
lg定位更大的桌面。

两个网格都完美无缺，两者都是responsive，两者都是works。任何人都可以向我解释两种方法的区别。

我想了解这两者在common中的作用以及它们在哪里 differ？
为什么要用first方法构建网格布局？为什么会选择second一个？。

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 之间的数字，它表示您希望元素填充的列数。

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

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

您可以在documentation上阅读有关 Bootstrap Media查询的更多信息。

修改媒体查询实际上以窗口大小为目标。因此，当您想要查看您的网页在较小/较大的设备上的显示方式时，只需调整您的浏览器。

Answer 2

回答你的问题，他们是一回事。每个屏幕大小的类别不同。在较小的屏幕尺寸中，根据所需的列数，您可能会在大屏幕尺寸中看到不同的内容。换句话说，您可以组合这些类以保持响应式布局的响应。我将在下面附上一个演示供您查看。但首先让我们来看看以下布局：

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一起，它们将保持每个屏幕尺寸的确切布局（我甚至在此设计中包含了额外的小部分）。

最好通过以下DEMO看到。只需使用右下方的屏幕尺寸，它就会更有意义。

各种cols如何在bootstrap中有所不同

2 个答案: