Question

我在我的一些项目中使用Bootstrap 3，特别是容器流体类，使我的页面能够自动在所有设备中正确显示。我知道关于col-xx类的以下内容：xs for＆lt; 768px，sm为＆gt; - 768px，md＆gt; = 992px，lg为＆gt; = 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个断点：

电话（＆lt; 768px）
平板电脑（≥768px）
桌面（≥992px）
大型桌面（≥1200px）

您的代码意味着平板电脑，台式机和大型桌面上有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-md-4个类（因为它们具有相同的值），则无需添加col-md-8和col-sm类。

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

<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列，其他屏幕上有2列，但在平板电脑上，您将有4-8（右列更宽），桌面和大型桌面8-4（左列更宽）。< / p>

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

1 个答案: