Контейнеры

Как они работают

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

Bootstrap поставляется с тремя различными контейнерами:

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

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

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

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

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

<div class="container">
  <!-- Содержимое здесь -->
</div>

Отзывчивые контейнеры

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

<div class="container-sm">100% ширина до маленькой контрольной точки</div>
<div class="container-md">100% ширина до средней контрольной точки</div>
<div class="container-lg">100% ширина до большой контрольной точки</div>
<div class="container-xl">100% ширина до очень большой контрольной точки</div>
<div class="container-xxl">100% ширина до очень-очень большой контрольной точки</div>

Плавные контейнеры

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

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

CSS

Sass переменные

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

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

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

Sass миксины

Помимо настройки 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();
}