1111
Перейти к основному содержаниюПерейти к навигации по документам
Cмотреть на GitHub

Контейнеры

Контейнеры являются фундаментальным строительным блоком Bootstrap, которые содержат ваш контент, дополняют и выравнивают его на устройствах или в областях просмотра.

На этой странице

Как это устроено

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

В Bootstrap используется три разных типа контейнеров:

  • .container, который устанавливает максимальную ширину max-width в каждой отзывчивой контрольной точке;
  • .container-fluid, ширина которого width: 100% на всех контрольных точках;
  • .container-{breakpoint}, то есть ширина width: 100% до указанной контрольной точки.

В приведенной ниже таблице показано, как максимальная ширина max-width каждого контейнера .container и .container-fluid сравнивается с исходными в каждой контрольной точке.

Посмотрите их в действии и сравните их в нашем примере Сеток.

Extra small
Extra small
<576px		Small
Small
≥576px		Medium
Medium
≥768px		large
Large
≥992px		Extra large
X-Large
≥1200px		Extra Extra large
XX-Large
≥1400px
.container100%540px720px960px1140px1320px
.container-sm100%540px720px960px1140px1320px
.container-md100%100%720px960px1140px1320px
.container-lg100%100%100%960px1140px1320px
.container-xl100%100%100%100%1140px1320px
.container-xxl100%100%100%100%100%1320px
.container-fluid100%100%100%100%100%100%

Контейнер по умолчанию

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

<divclass="container"><!-- Content here --></div>

Адаптивные контейнеры

Адаптивные контейнеры позволяют указывать класс шириной 100%, пока не будет достигнута указанная контрольная точка, после чего мы применяем max-width для каждой из более высоких контрольных точек. Например, .container-sm будет иметь ширину в 100% до тех пор, пока не будет достигнута контрольная точка sm, где он будет масштабироваться уже с помощью md, lg, xl и xxl.

<divclass="container-sm">100% wide until small breakpoint</div><divclass="container-md">100% wide until medium breakpoint</div><divclass="container-lg">100% wide until large breakpoint</div><divclass="container-xl">100% wide until extra large breakpoint</div><divclass="container-xxl">100% wide until extra extra large breakpoint</div>

Подвижные контейнеры

Используйте .container-fluid для создания контейнера полной ширины, охватывающего всю ширину области просмотра.

<divclass="container-fluid"> ...
</div>

Sass

Как показано выше, Bootstrap генерирует серию предопределенных контейнерных классов, чтобы помочь Вам создать желаемые макеты. Вы можете настроить эти предопределенные классы контейнеров, изменив карту Sass (находится в _variables.scss), которая их поддерживает:

$container-max-widths:(sm:540px,md:720px,lg:960px,xl:1140px,xxl:1320px);

Помимо настройки Sass, Вы также можете создавать свои собственные контейнеры с помощью нашего миксина Sass.

// Исходный миксин
@mixin make-container($padding-x:$container-padding-x){width:100%;padding-right:$padding-x;padding-left:$padding-x;margin-right:auto;margin-left:auto;}// Применение
.custom-container{@include make-container();}

Для получения дополнительной информации и примеров того, как изменить наши карты и переменные Sass, обратитесь к разделу Sass документации cистемы сеток.

222