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

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

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

...

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

Мои вопросы:

  • Когда вам понадобится одна HTML-страница с несколькими "контейнерами div"? Какая польза от этого предложения в отличие от простого помещения всего тела в один большой "контейнерный div"?
  • Вы когда-нибудь захотите вложить "контейнерные divs" внутри других? Когда/почему?

Ответ 1

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

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

  • Вы не в гнезде .container или .container-fluid - см. docs. Это не нужно.

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

Ответ 2

Собственно, это полностью зависит от требования дизайнера.

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

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

см. выше пример шаблона для понимания

Ответ 3

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

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