html - 使用多个 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>