Контейнеры

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

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

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

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

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

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

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

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

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

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

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

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</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.

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

// Usage
.custom-container {
  @include make-container();
}