Контейнери

Как работят

Контейнерите са най-основният елемент на оформлението в Bootstrap и са задължителни, когато използваме нашата мрежова система по подразбиране . Контейнерите се използват за задържане, подреждане и (понякога) центриране на съдържанието в тях. Докато контейнерите могат да бъдат вложени, повечето оформления не изискват вложен контейнер.

Bootstrap идва с три различни контейнера:

• .container, който задава a max-widthна всяка реагираща точка на прекъсване
• .container-fluid, което е width: 100%във всички точки на прекъсване
• .container-{breakpoint}, което е width: 100%до определената точка на прекъсване

Таблицата по-долу илюстрира как всеки контейнер се max-widthсравнява с оригинала .containerи .container-fluidпрез всяка точка на прекъсване.

Вижте ги в действие и ги сравнете в нашия пример за решетка .

Контейнер по подразбиране

Нашият клас по подразбиране .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 mixin.

// 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 .