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查询中定义，这有助于浏览器检测要使用的查询。

<强> Learn more here

<强>附录

上面提到的不同col类的使用应该是您为不同屏幕指定不同列大小的唯一情况。例如：如果您想要col中的xs，col中的sm，col中的3 md和col中的lg在col-xs-12 col-sm-6 col-md-3 col-lg-2中，您可以将其用作col-lg-6。否则，如果它们对于所有屏幕都是相同的，那么您可以使用上面的任何一个，如cols中所示。这将告诉浏览器使用6 $table = Array(); $table[1][1]=array('qtd' => 0); $table[1][2]=array('qtd' => 4); $table[2][1]=array('qtd' => 78); $table[3][2]=array('qtd' => 10); if (!isset($table[1][2])) { echo "Dosent Exists"; } else { echo "exists. qtd: " . $table[1][2]['qtd']; }而不管屏幕大小。

Answer 3

看看这个页面以获得一个想法

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

一般而言，使用多个col类的想法是根据屏幕大小使用不同的宽度百分比：

示例：

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

Answer 4

该方法通常用于屏幕尺寸。这样你就不会在7英寸的屏幕上看到7列。例如;使用{{1}}，手机上可以有1列，大型平板电脑上有3列，桌面显示器上有6列。

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

4 个答案: