一排排液可以吗？

Question

我一直在玩Twitter Bootstrap 网格系统 ，并注意到我可以通过以下方式混合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 row-fluid ？

Answer 1

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

在.row ， .spanX元素具有固定的像素宽度。 如果您正在使用响应式样式表，则此宽度可能会根据视口尺寸而更改。

但是，在.row-fluid中， .spanX元素具有基于百分比的宽度。 这里一个很好的副作用是.row-fluid元素可以放在任何元素内部，它只需将自身的大小调整为容器宽度的100％。 同样，此流体行中的任何.spanX元素都会相应地调整大小，因此每个“列”大约是.row-fluid容器的.row-fluid之一（占沟槽宽度），而不管DOM中行的宽度或位置如何。

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

Answer 2

是的，它可靠且有文件记录。 请查看文档中的Basic fluid grid HTML部分。 正如您将看到的，您可以：

通过将.row更改为.row-fluid使任何行“流动”。 列类保持完全相同，使得在固定网格和流体网格之间轻松切换。

这意味着您可以在布局中的任何位置使用此组件，无论它是否流畅都无关紧要。 您还会注意到“流体布局”部分与此部分完全分开。

Answer 3

是的，你可以用这种方式使用行和流体。 如果您正在使用bootstrap-responsive.css那么当重新调整浏览器大小或在移动设备上查看页面时，网格大小会被更改为适合。