12

我一直在玩 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？

4

3 回答 3

19

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

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

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

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

于 2012-09-04T19:45:15.903 回答
3

是的，它是可靠且有记录的。查看文档中的基本流体网格 HTML部分。如您所见，您可以：

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

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

于 2012-09-04T19:37:47.510 回答
1

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

于 2012-09-04T19:25:00.273 回答