Хорошо ли иметь ряд жидкости внутри ряда?

Я играл с сеткой Ѕartstart и заметил, что я мог бы смешивать 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?

Ответы

Ответ 1

Основными целями .row-fluid являются изменение стиля элементов .spanX.

Внутри .row элементы .spanX имеют фиксированную ширину пикселя. Эта ширина может изменяться в зависимости от размеров видовых экранов, если вы используете гибкую таблицу стилей.

Внутри .row-fluid, однако, элементы .spanX имеют процентную ширину. Один из приятных побочных эффектов здесь состоит в том, что элемент .row-fluid может быть помещен внутри элемента any, и он просто будет составлять 100% ширины контейнера. Аналогично, любые элементы .spanX в этой строке текучей среды будут соответственно соответствовать размерам, так что каждый столбец будет примерно одиннадцатый (с учетом ширины желоба) контейнера .row-fluid, независимо от ширины или местоположения строки в DOM.

Если есть какая-либо область вашей страницы, которую вы хотите разбить на некоторое количество столбцов, можно использовать .row-fluid.

Ответ 2

Да, он надежный и документированный. Взгляните на раздел "Основная флюидная сетка HTML" на документацию. Как вы увидите, вы можете:

Сделайте любую строку "жидкость", изменив ее. Классы столбцов остаются точно такими же, что позволяет легко переключаться между фиксированными и жидкостными сетками.

Это означает, что вы можете использовать этот компонент в любом месте вашего макета, не имеет значения, текут он или нет. Вы также заметите, что раздел "Макет жидкости" полностью отделен от этого.

Ответ 3

Да, вы можете использовать строку и строку-жидкость таким образом. Если вы используете bootstrap-responsive.css, а затем при изменении размера браузера или просмотре страницы на мобильных устройствах размеры сетки изменяются, чтобы они соответствовали.