Несколько и / или вложенных контейнеров Bootstrap?

84

Я понимаю , что все элементы в стиле Bootstrap должны существовать внутри <div class="container">элемента. Но иногда я вижу примеры Bootstrap, где есть несколько «контейнеров»:

<div class="container">
    <!-- Blah, GUI stuff, blah -->
</div>

...

<div class="container">
    <!-- Blah, more GUI stuff, blah -->
</div>

Мои вопросы:

  1. Когда вам когда-нибудь понадобится одна HTML-страница с несколькими «контейнерами div»? Какая польза от этого по сравнению с помещением всего тела в один большой «контейнерный div»?
  2. Хотели бы вы когда-нибудь вкладывать «блоки-контейнеры» в другие? Когда / почему?
css  twitter-bootstrap 
— смееб
источник
1
Если вы используете полноразмерную карусель, у нее есть контейнеры для подписей, поэтому ее не должно быть в контейнере. Из-за этого у вас может быть контейнер над ним и контейнер под ним.
— Aibrean
1
Хотя @Christina верна в том, что в документации говорится, что вы не вкладываете контейнеры, иногда это используется и полезно. См. Stackoverflow.com/questions/29660034/… для получения дополнительной информации о вложении.
— гидманма

Ответы:

80

  1. Некоторые разделы страницы будут занимать всю ширину области просмотра, а другие - нет. Некоторые фоны будут иметь полную ширину, а содержимое - нет.

    Примером этого является область короткометражки, которая имеет фоновое изображение или цвет, равный полной ширине области просмотра, но содержимое внутри нее, формы или что-то еще, не превышает .containerзаданной ширины области просмотра.

  2. Вы не вкладываете .containerили .container-fluid- смотрите документацию . Это необязательно.

    Документы: Bootstrap требует наличия содержащего элемента для обертывания содержимого сайта и размещения нашей сеточной системы. Вы можете выбрать один из двух контейнеров для использования в своих проектах. Обратите внимание, что из-за заполнения и прочего ни один из контейнеров не может быть вложенным [это не означает, что .container и .container-fluid НЕ должны быть вложенными].

— Кристина
источник
4
У меня часто есть .container-fluidчто-то вроде панели навигации или какого-то баннера, в то время как основной сайт находится внутри .container.
— DavidG
3
@DavidG Да, и тогда у вас есть двойной отступ. Документы: Bootstrap требует наличия содержащего элемента для обертывания содержимого сайта и размещения нашей сеточной системы. Вы можете выбрать один из двух контейнеров для использования в своих проектах. Обратите внимание, что из-за заполнения и многого другого ни один из контейнеров не может быть вложенным. getbootstrap.com/css
— Кристина
1
@DavidG. Я не использую .container-fluid, если непосредственный дочерний элемент не является .row и columns.
— Кристина
1
Я тоже. Я имел в виду, что у меня будет контейнер с жидкостью с панелью навигации, чтобы он выходил за края экрана, а затем после тега закрытия контейнера запустите новый контейнер с основным содержимым.
— DavidG
1
Здесь нужно сделать большое различие - возможно, они не должны быть вложенными напрямую , но они могут быть вложенными, а в некоторых случаях должны быть вложенными . Допустим, у меня есть div панели с дополнениями внутри основного контейнера, который не является строкой или столбцом - в этом случае мне нужен .container-fluidкласс, окружающий мои строки / столбцы внутри панели; в противном случае я бы получил горизонтальную полосу прокрутки (если переполнение внутри панели не установлено как скрытое, но я могу этого не хотеть, может быть, мне нужна полоса прокрутки, если внутри много данных, возможно, широкая таблица).
— jbyrd
17

В отличие от того, что некоторые говорили, вы можете вложить container-fluidвнутри container. На официальном сайте начальной загрузки есть даже пример:

http://getbootstrap.com/examples/navbar/

— Мало по малу
источник
1
В случае, если содержимое этой ссылки в конечном итоге изменится, это версия 3.3, в которой пример включает containerвложение a container-fluid: view-source: getbootstrap.com/docs/3.3/examples/navbar
— Райан
5

На самом деле это полностью зависит от требований дизайнера.

Иногда вам нужна полная ширина строки (я имею в виду окно просмотра или полосу видимой части, которую вы можете получить без отдельного класса контейнера)

http://binarytheme.com/demos?theme=bootsrap-landing-page-blue

см. пример шаблона выше, чтобы понять

— контрольная работа
источник
0

Сэкономьте свое время и переключитесь на Css-grid - родную CSS-сетку.

Контейнеры начальной загрузки имеют ограничение, если вы ищете ограничение на 12 столбцов, проблему заполнения 10-пикселями, добавление к этому не является родным (встроенный CSS), когда пользователю необходимо загрузить его на свой компьютер, и, кроме всего прочего, число погружения, которое вам нужно обработать.

Имея все это в виду, попробуйте переключиться на CSS-сетку, вот и хорошая площадка для начала.

Теперь перейдем к минусам CSS-сетки, которые все еще несовместимы с IE.

— Feras
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.