Контејнери

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

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

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

• .container, кој поставува a 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 .