引导程序中的流体网格系统

Question

我正在读一本关于Bootstrap的书，出版物O'REILLY

似乎嵌套流体网格有点不同：由于我们使用的是百分比，因此每行将列数重置为12.例如，如果您在Span8内，而不是 两个span4元素将内容分成两半，您将使用两个span6 divs（请参阅 流体网格系统| 5图1-4）。

响应内容就是这种情况，因为我们希望内容能够填充100％的容器：

<div class="row-fluid">

    <div class="span8">
        level 1 of column
        <div class="row">
            <div class="span6">
                Level 2
            </div>
            <div class="span6">
                Level 2
            </div>
        </div>
    </div>
</div>

我的问题是，如果我们满足于填充100％的容器，为什么不使用两个span4 span6？

Answer 1

因为网格跨度宽度是根据整个网格宽度计算的，而不是相关元素的父跨度。

想象一下你有3或4级嵌套的场景。宽度计算会变得非常复杂。通过保持所有相对于网格外部结构的内容，可视化和CSS本身都保持简化。