Row-fluid vs row в twitter bootstrap

У меня есть контейнерный элемент container-fluid, и я использую row, а не row-fluid, по общему признанию из-за незнания.
Сейчас я пытаюсь заменить класс row на класс row-fluid, но имею столкнуться с некоторыми вопросами.
Сначала я посмотрел, как определяется ширина row-fluid в .less, и для меня она совершенно иероглифична, так что кто-нибудь захочет объяснить?

Что еще более важно, когда я заменяю строку на row-fluid, высота элемента падает до 0, что требует от меня включения класса .clearfix, чтобы элемент row-Fluid увеличивался, чтобы содержать его дочерние столбцы. Почему это необходимо, то есть что плавает и почему, когда я заменяю row на row-fluid?

Ответы

Ответ 1

Это зависит от того, какие элементы вы хотите знать по ширине. Сам класс row-fluid имеет ширину 100%. Пространства (или столбцы) имеют относительную ширину, настроенную таким образом, что она объединяется с 100.

В плавании: все столбцы плавают, это то, что делает его текучим. Единственное значение, связанное с высотой, которое имеет значение row-fluid, - это установка min-height: 30px. Это по определению странно, что что-то рухнет до высоты 0.

Я подозреваю, что стиль, который вы сделали поверх старой сетки, вызывает основные проблемы.

Ответ 2

Вот что говорит twitter bootstrap:

Строки должны быть размещены внутри контейнера (фиксированной ширины) или жидкости-контейнера (полная ширина) для правильного выравнивания и заполнения.

Ну, это примерно container не rows, но если этого объяснения недостаточно для вас, то это краткое объяснение, которое должно разъяснить вам.

ПРИМЕЧАНИЕ.. Если его версия 2, то row-fluid сама является float: left, которая должна быть очищена, как вы говорите.

Это связано с тем, что сетки Fluid используют развёртывание по-разному: каждый вложенный уровень столбцов должен содержать до 12 столбцов. Это связано с тем, что для настройки ширины сетки для жидкости используются проценты, а не пиксели.

Надеюсь, что это поможет:)

Ответ 3

Исправление загрузки Bootstrap 2.x до 3.0 Bootstrap 2.x → .row-fluid и Bootstrap 3.0 → .row