css - Bootstrap 网格系统列说明

Question

我还在开始学习Bootstrap，对网格系统感到困惑。网格系统的描述说

Bootstrap 包括一个响应式、移动优先的流体网格系统，随着设备或视口大小的增加，它可以适当地扩展到12 列。

但是为什么在后面的例子中，他们会这样表现呢？

<div class="row">
    <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

我知道 xs 是超小型设备而 md 是针对中型设备的，但是 xs 的类为什么是“col-xs-12”和“col-xs-6”？我的意思是，与 Bootstrap Grid System 的定义相比，它们现在最多添加 18 列。有人可以请教我吗？

score 1 · Accepted Answer

你弄错了。在超小型设备中，第一个div将填充整行，第二个将放置在其下方，因为该类仅half包含该行。col-xs-12如果引导网格系统中的整数总和大于 12，则使网格系统大于 18 的列将放在下一行。

用代码解释：

<div class="row">
    <div class="col-xs-4"></div>
    <div class="col-xs-8"></div>
</div>

在这种情况下，这两个.col-xs元素会粘在一起，因为4+8 = 12它们.row只包含 12 列。

<div class="row">
    <div class="col-xs-5"></div>
    <div class="col-xs-8"></div>
</div>

现在该.col-xs-5列将位于第一行.col-xs-8并将落入第二行。

有关更多说明，请参见下图：

score 0 · Accepted Answer

xs & md 设置它们的固定大小，因此，在 lg(big sceen) 中，您可以使用 col-xs-12 col-xs-6 它将被设置为其大小。所以，这是错误的：“与 Bootstrap 网格系统的定义相比，它们现在最多添加 18 列。”

尝试这个：

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