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

Контейнери

Контейнери є основним будівельним блоком Bootstrap, який містить, вкладає та вирівнює ваш вміст у певному пристрої чи вікні перегляду.

Як вони працюють

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

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

  • .container, який встановлює для max-widthкожної відповідної точки зупинки
  • .container-{breakpoint}, width: 100%до вказаної точки зупинки
  • .container-fluid, який знаходиться width: 100%на всіх точках зупину

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

Перегляньте їх у дії та порівняйте в нашому прикладі Grid .

Дуже маленький
<576 пікселів
Маленький
≥576 пікселів
Середній
≥768 пікселів
Великий
≥992 пікселів
X-Large
≥1200 пікселів
XX-великий
≥1400 пікселів
.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 .