Перейти к основному содержанию Перейти к навигации по документам
Check
in English

Контейнеры

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

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

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

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

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

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

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

Очень маленький
<576 пикселей
Маленький
≥576px
Середина
≥768px
Большой
≥992px
X-большой
≥1200px
ХХ-большой
≥1400px
.container 100% 540 пикселей 720 пикселей 960 пикселей 1140 пикселей 1320 пикселей
.container-sm 100% 540 пикселей 720 пикселей 960 пикселей 1140 пикселей 1320 пикселей
.container-md 100% 100% 720 пикселей 960 пикселей 1140 пикселей 1320 пикселей
.container-lg 100% 100% 100% 960 пикселей 1140 пикселей 1320 пикселей
.container-xl 100% 100% 100% 100% 1140 пикселей 1320 пикселей
.container-xxl 100% 100% 100% 100% 100% 1320 пикселей
.container-fluid 100% 100% 100% 100% 100% 100%

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

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

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

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

Отзывчивые контейнеры позволяют указать класс шириной 100 %, пока не будет достигнута указанная точка останова, после чего мы применяем max-widths для каждой из более высоких точек останова. Например, .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>

Сасс

Как показано выше, 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 документации по Grid .