Контејнери

Како раде

Контејнери су најосновнији елемент распореда у Боотстрапу и потребни су када се користи наш подразумевани систем мреже . Контејнери се користе да садрже, обложе и (понекад) центрирају садржај унутар њих. Док контејнери могу бити угнежђени, већина изгледа не захтева угнежђени контејнер.

Боотстрап долази са три различита контејнера:

• .container, који поставља а max-widthна сваку тачку прекида
• .container-{breakpoint}, што је width: 100%до наведене тачке прекида
• .container-fluid, што је width: 100%на свим тачкама прекида

Табела у наставку илуструје како се сваки контејнер max-widthупоређује са оригиналом .containerи .container-fluidпреко сваке тачке прекида.

Погледајте их у акцији и упоредите их у нашем Грид примеру .

Подразумевани контејнер

Наша подразумевана .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>

Сасс

Као што је горе приказано, Боотстрап генерише серију унапред дефинисаних класа контејнера како би вам помогао да изградите изгледе које желите. Можете да прилагодите ове унапред дефинисане класе контејнера тако што ћете модификовати Сасс мапу (која се налази у _variables.scss) која их покреће:

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

Поред прилагођавања Сасс-а, такође можете креирати сопствене контејнере са нашим Сасс миксином.

// 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();
}

За више информација и примера о томе како да измените наше Сасс мапе и варијабле, погледајте одељак Сасс у Грид документацији .