twitter-bootstrap - 行内有行流体可以吗？

Question

我一直在玩 Twitter Bootstrap grid system ，并注意到我可以混合 row和 row-fluid通过以下方式:

<div class="row">
    <div class="span8">
        ...
    </div>

    <div class="span4>
        <div class="row-fluid">
            <div class="span8">
                ...
            </div>
            <div class="span4">
                ...
            </div>
        </div>
    </div>
</div>

这对我有用，但是我不确定我是否可以依靠这种行为来保持一致。如果发现有关此主题的文档不清楚。

这是对网格系统的记录和可靠的使用吗？或者我应该只使用 row-fluid在另一个 row-fluid ?

Answer 1

.row-fluid的主要用途是改变 .spanX 的样式元素。

在 .row 内, .spanX元素具有固定的像素宽度。如果您使用响应式样式表，此宽度可能会根据视口(viewport)尺寸而变化。

在 .row-fluid 内，但是，.spanX元素具有基于百分比的宽度。这里的一个很好的副作用是 .row-fluid元素可以放在 内任意 元素，它会简单地将自身调整为容器宽度的 100%。同样，任何 .spanX此流体行中的元素将相应地调整自身大小，因此每个“列”大约是 .row-fluid 的 12 分之一(占排水沟宽度)。容器，无论行的宽度或在 DOM 中的位置如何。

如果您想要将页面的任何区域拆分为一定数量的列，.row-fluid可以使用。