Перейти к основному содержанию Перейти к навигации по документам
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
.container 100% 540px 720px 960px 1140px 1320px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px
.container-fluid 100% 100% 100% 100% 100% 100%

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

По умолчанию класс .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>

Sass

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

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

В дополнение к настройке 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();
}

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