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

Контејнери

Контејнерите се фундаментален градежен блок на Bootstrap што ја содржи, поставува и усогласува вашата содржина во даден уред или приказ на гледање.

Како тие работат

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

Bootstrap доаѓа со три различни контејнери:

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

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

Погледнете ги во акција и споредете ги во нашиот пример на Grid .

Екстра мала
<576 пиксели
Мала
≥576 px
Средно
≥768 px
Големи
≥992 пиксели
X-Large
≥1200 px
XX-Large
≥1400px
.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 .