使用多个 Bootstrap 列大小的目的是什么？

Question

我对 Bootstrap 相当陌生，并且我了解 Bootstrap 如何使用 12 列网格。当我想利用 Bootstrap 网格时，我通常会这样做：

<div class="row">
    <div class="col-md-6">
    ...
    </div>
    <div class="col-md-6">
     ...
    </div>
</div>

我还了解不同的列大小用于不同的屏幕尺寸：

<div class="row">
    <div class="col-xs-6">
    ...
    </div>
    <div class="col-xs-6">
    ...
    </div>
</div>

但是，我看到很多人做了类似的事情：

<div class="row">
    <div class="col-xs-6 col-md-6 col-lg-6">
    ...
    </div>
    <div class="col-xs-6 col-md-6 col-lg-6">
    ...
    </div>
</div>

为什么要使用多种列尺寸？浏览器会检测哪一个适合使用吗？

Answer 1

在此示例中绝对没有理由拥有所有三个类：

<div class="row">
    <div class="col-xs-6 col-md-6 col-lg-6">
    ...
    </div>
    <div class="col-xs-6 col-md-6 col-lg-6">
    ...
    </div>
</div>

它实际上与此相同：

<div class="row">
    <div class="col-xs-6">
    ...
    </div>
    <div class="col-xs-6">
    ...
    </div>
</div>

Bootstrap 网格类适用于高于指定大小的所有尺寸，因此应用

col-xs-6

将导致该元素在任何较大的屏幕尺寸（如 sm、md 等）上也包含 6 列。我猜无论谁包含所有这三个第一个示例中的类对 Bootstrap 网格系统的工作原理没有深入的了解。

如果您希望元素在不同的屏幕尺寸上具有不同的尺寸，则只需包含多个类：

<div class="row">
    <div class="col-xs-4 col-md-3 col-lg-2">
    ...
    </div>
    <div class="col-xs-8 col-md-9 col-lg-10">
    ...
    </div>
</div>

Answer 2

多种

col

尺寸适用于不同类型的屏幕：

• xs

  ：超小屏幕（手机）

• sm

  ：类似于平板电脑的屏幕

• md

  ：像桌面一样的屏幕

• lg

  ：更大桌面的屏幕

基本上，这些将在

media

中的各种

bootstrap.css

查询中定义，这有助于浏览器检测要使用哪一个。

在这里了解更多

---

附录

使用上述不同的

col

类应该是为不同屏幕指定不同列大小的唯一情况。例如：如果您想要在

col

中放置 12 个

xs

，在

col

中放置 6 个

sm

，在

col

中放置 3 个

md

，在

col

中放置 2 个

lg

，那么您可以将其用作

col-xs-12 col-sm-6 col-md-3 col-lg-2 

。否则，如果所有屏幕的它们都相同，那么您可以使用上面的任何一个，如

col-lg-6

中所示。这将告诉浏览器使用 6

cols

，无论屏幕尺寸如何。

Answer 3

查看此页面以获得想法

http://getbootstrap.com/examples/grid/

一般来说，使用多个 col 类背后的想法是根据屏幕尺寸使用不同的宽度百分比：

示例：

如果你在元素上添加 col-md-6 和 col-xs-12 ，当屏幕尺寸接近中等断点时，它将使用 6 列，但当屏幕尺寸较小时，它将使用整个宽度

Answer 4

该方法通常用于屏幕尺寸。这样您就不会在 7 英寸屏幕上看到 7 列。例如;使用

<div class="col-xs-1 col-md-3 col-lg-6">

，您可以在手机上显示 1 列，在大型平板电脑上显示 3 列，在桌面显示器上显示 6 列。