一排排液可以嗎？

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那么當重新調整瀏覽器大小或在移動設備上查看頁面時，網格大小會被更改為適合。