Контейнери

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

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

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

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

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

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

Контейнер за замовчуванням

Наш клас за замовчуванням .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 .