Олуци

Олуци су допуна између ваших колона, која се користи за реаговање простора и поравнавање садржаја у систему Боотстрап мреже.

На овој страници

Како раде

Олуци су празнине између садржаја колона, створене хоризонталним padding. Постављамо padding-rightи padding-leftна сваку колону и користимо негатив marginда то поништимо на почетку и на крају сваког реда да бисмо поравнали садржај.
Олуци почињу од 1.5rem( 24px) ширине. Ово нам омогућава да ускладимо нашу мрежу са скалом одстојника и маргина .
Олуци се могу брзо подешавати. Користите класе олука специфичне за тачку прекида да бисте модификовали хоризонталне олуке, вертикалне олуке и све олуке.

Хоризонтални олуци

.gx-*класе се могу користити за контролу хоризонталних ширина олука. Можда ће морати да се подеси или родитељ ако се користе и већи олуци да би се избегло нежељено преливање, користећи одговарајући услужни програм за попуњавање .container. .container-fluidНа пример, у следећем примеру смо повећали допуну са .px-4:

Прилагођено пуњење колона

<div class="container px-4">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

Алтернативно решење је додавање омотача .rowса .overflow-hiddenкласом:

Прилагођено пуњење колона

<div class="container overflow-hidden">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

Вертикални олуци

.gy-*класе се могу користити за контролу вертикалних ширина олука. Као и хоризонтални олуци, вертикални олуци могу изазвати преливање испод .rowна крају странице. Ако се ово деси, додајете омотач око .rowкласе .overflow-hidden:

Прилагођено пуњење колона

<div class="container overflow-hidden">
  <div class="row gy-5">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

Хоризонтални и вертикални олуци

.g-*класе се могу користити за контролу хоризонталних ширина олука, за следећи пример користимо мању ширину олука, тако да неће бити потребе за додавањем .overflow-hiddenкласе омотача.

Прилагођено пуњење колона

<div class="container">
  <div class="row g-2">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

Олуци колона реда

Класе олука се такође могу додати колонама редова . У следећем примеру користимо колоне редова са одзивом и класе олука са одзивом.

Колона ред

<div class="container">
  <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
  </div>
</div>

Нема олука

Олуци између колона у нашим унапред дефинисаним мрежним класама могу се уклонити помоћу .g-0. Ово уклања негативне marginс из .rowи хоризонталне paddingиз свих непосредних подређених колона.

Треба вам дизајн од ивице до ивице? Испустите родитеља .containerили .container-fluid.

У пракси, ево како то изгледа. Имајте на уму да ово можете наставити да користите са свим другим унапред дефинисаним класама мреже (укључујући ширине колона, нивое који реагују, промене редоследа и још много тога).

.цол-см-6 .цол-мд-8

.цол-6 .цол-мд-4

<div class="row g-0">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Промените олуке

Класе су изграђене од $guttersСасс карте која је наслеђена од $spacersСасс мапе.

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);