Latakai
Latakai yra užpildas tarp stulpelių, naudojamas norint greitai išdėstyti ir suderinti turinį Bootstrap tinklelio sistemoje.
Kaip jie veikia
-
Latakai yra tarpai tarp stulpelių turinio, sukurti horizontaliu
padding
. Kiekviename stulpelyje nustatomepadding-right
ir , o kiekvienos eilutės pradžioje ir pabaigojepadding-left
naudojame neigiamąmargin
reikšmę, kad sulygiuotume turinį. -
Latakai prasideda nuo
1.5rem
(24px
) pločio. Tai leidžia tinklelį suderinti su užpildo ir paraščių tarpiklių skale. -
Latakai gali būti reguliuojami pagal poreikį. Norėdami modifikuoti horizontalius, vertikalius latakus ir visus latakus, naudokite lūžio taškams būdingas latakų klases.
Horizontalūs latakai
.gx-*
klasės gali būti naudojamos horizontaliems latakų pločiams valdyti. Jei taip pat naudojami didesni latakai, kad būtų išvengta nepageidaujamo perpildymo, gali tekti pakoreguoti .container
arba pagrindinį lataką, naudojant atitinkamą užpildymo priemonę. .container-fluid
Pavyzdžiui, šiame pavyzdyje padidinome užpildymą .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>
Alternatyvus sprendimas yra pridėti apvyniojimą aplink .row
su .overflow-hidden
klase:
<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>
Vertikalūs latakai
.gy-*
klasės gali būti naudojamos vertikalių latakų pločiams valdyti. Kaip ir horizontalūs latakai, vertikalūs latakai gali sukelti perpildymą žemiau .row
puslapio pabaigoje. .row
Jei taip nutinka, kartu su .overflow-hidden
klase pridedate įvyniojimą :
<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>
Horizontalūs ir vertikalūs latakai
.g-*
klasės gali būti naudojamos horizontaliems latakų pločiams valdyti, toliau pateiktame pavyzdyje naudojame mažesnį latakų plotį, todėl nereikės pridėti .overflow-hidden
apvyniojimo klasės.
<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>
Eilučių kolonų latakai
Latakų klases taip pat galima įtraukti į eilučių stulpelius . Toliau pateiktame pavyzdyje naudojame reaguojančius eilučių stulpelius ir reaguojančias latakų klases.
<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>
Jokių latakų
Latakai tarp stulpelių mūsų iš anksto nustatytose tinklelio klasėse gali būti pašalinti naudojant .g-0
. Taip pašalinami neigiami margin
s iš visų tiesioginių antrinių stulpelių .row
ir horizontalūs .padding
Reikia dizaino nuo krašto iki krašto? Nuleiskite tėvą .container
arba .container-fluid
.
Praktiškai tai atrodo taip. Atminkite, kad galite ir toliau naudoti tai su visomis kitomis iš anksto nustatytomis tinklelio klasėmis (įskaitant stulpelių plotį, interaktyvias pakopas, pertvarkymus ir kt.).
<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>
Pakeiskite latakus
Klasės sudaromos iš $gutters
Sass žemėlapio, kuris yra paveldėtas iš $spacers
Sass žemėlapio.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);