Жолабы
Жолабы - гэта пракладка паміж вашымі слупкамі, якая выкарыстоўваецца для адаптыўнага прастору і выраўноўвання кантэнту ў сістэме сеткі Bootstrap.
Як яны працуюць
-
Жолабы - гэта прамежкі паміж змесцівам слупка, створаныя гарызантальнымі
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>
Шэраг калон жолабаў
Класы Gutter таксама могуць быць дададзены ў слупкі радкоў . У наступным прыкладзе мы выкарыстоўваем адаптыўныя слупкі радкоў і адаптыўныя класы канструкцыі.
<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
s .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
карты Sass, якая атрымала ў спадчыну ад $spacers
карты Sass.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);