Олуци
Олуци су допуна између ваших колона, која се користи за реаговање простора и поравнавање садржаја у систему Боотстрап мреже.
Како раде
-
Олуци су празнине између садржаја колона, створене хоризонталним
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
.
У пракси, ево како то изгледа. Имајте на уму да ово можете наставити да користите са свим другим унапред дефинисаним класама мреже (укључујући ширине колона, нивое који реагују, промене редоследа и још много тога).
<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,
);