Html 使用多个引导列大小的目的是什么？

我是Bootstrap的新手，我了解Bootstrap如何使用12列网格。当我想利用引导网格时，我通常是这样做的：

<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>

...
...

---

为什么要使用多个列大小？浏览器是否会检测到哪一个适合使用

该方法通常用于屏幕尺寸。这样你就不会在7英寸的屏幕上出现7列。例如使用

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

在本例中，绝对没有理由将所有三个类都设置为：

<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>

---

请看一下这一页以了解情况

通常，使用多个col类背后的想法是根据屏幕大小使用不同的宽度百分比：

例如：

---

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

col

大小适用于不同类型的屏幕：

• xs

  ：超大屏幕（手机）

• sm

  ：平板电脑的屏幕样式

• md

  ：屏幕式桌面

• lg

  ：大桌面屏幕

基本上，这些将在

bootstrap.css

中的各种

media

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

---

附录

---

只有在为不同屏幕指定不同列大小的情况下，才能使用上述不同的

col

类。例如：如果您想在

xs

中使用12

col

、在

sm

中使用6

col

、在

md

中使用3

col

和在

lg

中使用2

col

col，则可以将其用作

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

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

col-lg-6

。这将告诉浏览器使用6

cols

，而不管屏幕大小。

它的手机已启动。因此，如果您只需要1个大小的col-xs-6就足够了。如果希望在不同断点中使用不同的大小，可以指定更多。一个例子是，在所有断点中都有2个col，但在@mindore的示例中，“col-sm-6 col-xs-12”将完成相同的任务，因为md和lg将继承sm设置。在平板电脑和更高版本上，这会让你看到两列元素的宽度，在手机上，这会让你看到一列元素的宽度，这是完全错误的。去看看，了解网格。“col-xs-1”是指在手机上，您希望内容占据12列中的1列。“col-lg-6”是指在大屏幕上，您希望内容占据12列的一半。你的例子会使内容在小屏幕上变小，在大屏幕上变大，这是没有意义的。“col-lg-1 col-md-6 col-xs-12”会更有意义。随着屏幕的缩小，你希望内容逐渐占据更多的栏目，这样它会更大，更容易阅读。我不知道我是怎么犯这个错误的，真的有点尴尬。可能和这四个人在早晨的时候有关。谢谢你的更正。你的补遗似乎是倒退的，或者措辞不好。这意味着，如果要在xs中显示1列，则应使用col-xs-1，但col-xs-1会使内容只占用12列中的一列。如果需要一个可见列，则必须使用col-xs-12。我看不出您为什么要使用“col-xs-1 col-sm-3 col-md-6 col-lg-12”示例，因为这意味着随着屏幕变大，内容将逐渐占据更多的宽度。这将在大屏幕上产生令人恼火的宽内容，在小屏幕上产生微小内容。“col-xs-12 col-sm-6 col-lg-3”会更好用。@SteveHiner。。谢谢你指出。。更新了附录：）我看了一下，它说xs只有“小于”768，而其他尺寸都是“大于或等于”。那么这种行为是否不适用于“xs”？“引导网格类适用于指定大小以上的所有大小，因此应用col-xs-6将导致该元素在任何较大屏幕大小（如sm、md等）上也包含6列”。你能解释一下怎么做吗？它是否使用javascript来实现这一点？

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

<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>