css - 如何正确使用 Bootstrap 3 网格属性

Question

我在我的几个元素中使用了 Bootstrap 3，尤其是 container-fluid 类，它使我的页面自动在所有设备上正确显示。我知道以下关于 col-xx 类的信息:xs 代表 < 768px，sm 代表 >- 768px，md >= 992px 和 lg 代表 >= 1200px。假设我有以下代码:

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4">
            Content 1
        </div>
        <div class="col-sm-8">
            Content 2
        </div>
    </div>
</div>

我相信在智能手机中，内容 1 和内容 2 将占据全屏，而在所有其他设备中，内容 1 将占据 4 列，内容 2 将占据 8 列。如果是这样，对 md 和 lg 的需求是什么？可能我没有正确理解这个概念。相反，我应该在两个 div 中使用 class="col-sm-2 col-md-2 col-lg-2"和 class="col-sm-8 col-md-8 col-lg-8"以便它在所有设备上都能正常工作吗？

谢谢

Answer 1

Bootstrap 有 4 个断点:

1. 手机(<768px)
2. 平板电脑(≥768px)
3. 桌面(≥992px)
4. 大型桌面(≥1200 像素)

您的代码意味着您在平板电脑、台式机和大型台式机上有 2 列，在手机上有 1 列。

如果您查看 bootstrap.css 中的代码:

@media (min-width: 768px) {
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-8 {
    width: 66.66666667%;
  }
}

@media (min-width: 992px) {
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
}

因此，如果您有 col-sm，则无需添加 col-md-4 和 col-md-8 类类(因为它们具有相同的值)。

您可以在不同的屏幕尺寸上更改列的宽度，例如:

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4 col-md-8">
      Content 1
    </div>
    <div class="col-sm-8 col-md-4">
      Content 2
    </div>
  </div>
</div>

此代码意味着您将在手机上有 1 列，在其他屏幕上有两列，但在平板电脑上您将有 4-8 列(右列较宽)，在台式机和大型台式机上有 8-4 列(左列较宽)。