Пређи на главни садржај Прескочи на навигацију докумената
in English

Контејнери

Контејнери су основни градивни блок Боотстрапа који садрже, додају и поравнавају ваш садржај унутар датог уређаја или оквира за приказ.

Како раде

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

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

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

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

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

Изузетно мали
<576пк
Мала
≥576пк
Средње
≥768 пиксела
Велика
≥992 пиксела
Кс-Ларге
≥1200пк
КСКС-Велики
≥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-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();
}

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