使用多个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将导致该元素在任何更大的屏幕尺寸上也包含6列,如sm,md等.我猜测在第一个中包含所有三个类的人示例并未完全了解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上面提到的不同类的使用应该是您为不同屏幕指定不同列大小的唯一情况.例如:如果你想要12 col英寸xs,6 col英寸sm,3 col英寸md和2 col英寸lg,那么你可以使用它col-xs-12 col-sm-6 col-md-3 col-lg-2.否则,如果它们对于所有屏幕都是相同的,那么你可以使用上面的任何一个,如col-lg-6.这将告诉浏览器使用6 cols而不管屏幕大小.

Answer 3

该方法通常用于屏幕尺寸。这样您就不会在 7 英寸屏幕上看到 7 列。例如; 您可以<div class="col-xs-1 col-md-3 col-lg-6">在手机上显示 1 列，在大型平板电脑上显示 3 列，在桌面显示器上显示 6 列。