Bootstrap 网格系统列说明

Question

刚开始学习Bootstrap，对网格系统很疑惑。网格系统的描述说

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

可是后面的例子怎么会这样呢？

<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 网格系统的定义相比，它们现在最多可添加 18 列。有人可以请教我这个吗？

Answer 1

你弄错了。在超小型设备中，第一个 div 将填满整行，第二个将放在其下方，因为 col-xs-12 class，仅包含该行的 half。如果 bootstrap 网格系统中的整数和大于 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 将位于第二行。

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

Answer 2

xs 和 md 得到它们的固定大小，所以在 lg（大屏幕）中，你可以使用 col-xs-12 col-xs-6 它将被设置为它的大小。所以，这是错误的："they now add up to 18 columns in contrast to the definition of the Bootstrap Grid System."

试试这个：

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

Bootstrap 网格系统列说明

Bootstrap grid system columns clarification

css

grid-system

twitter-bootstrap

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