Row fluid: Что правильно использовать? Класс row или row-fluid при верстки responsive шаблона Bootstrap 2.3.2

javascript — row-fluid vs row в twitter bootstrap

спросил 8 лет, 2 месяца назад

Изменено 3 года, 2 месяца назад

Просмотрено 31к раз

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

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

Зачем это нужно, т.е. что плавает и почему при замене строка с жидкостью строки ?

• javascript
• css
• twitter-bootstrap
• twitter-bootstrap-3

1

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

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

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

3

Вот что говорит загрузчик Twitter:

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

Ну, речь идет о контейнере , а не о строках , но если этого объяснения вам недостаточно, то это краткое объяснение, которое должно прояснить для вас ситуацию.

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

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

Надеюсь, это поможет 🙂

2

Изменение класса Bootstrap 2.x на 3.0 Bootstrap 2.x —> .row-fluid и Bootstrap 3.0 —> .row

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

css — Twitter-bootstrap: как правильно использовать класс row-fluid?

спросил 9 лет, 6 месяцев назад

Изменено 9 лет, 6 месяцев назад

Просмотрено 68 тысяч раз

У меня проблема с пониманием того, как работает класс row-fluid . Согласно документации, он приспосабливается к гибкому дизайну, такому как адаптивный дизайн. Поэтому, если у него достаточно места, он помещается в ту же строку, в противном случае он переходит на следующую строку.

Однако, взглянув на этот пример здесь: https://duelify.com/

Как ни странно, первые три заголовка статьи помещаются в первую строку. Второй ряд и остальные немного сдвинуты вправо. Но, глядя на html (ниже), никакие дополнительные классы не участвуют, чтобы вызвать этот «побочный эффект».

Почему заголовки статей не помещаются в одну строку. Почему существует этот случайный промежуток между ними? Есть ли способ сделать их упорядоченными без каких-либо промежутков между ними?

• css
• твиттер-бутстрап

1

В вашем случае правильный код будет выглядеть так:

 

   <дел>
   <дел>
   <дел>

<дел>
   <дел>
   <дел>
   <дел>