Alavai
Gutters o le padding i le va o au koluma, faʻaaoga e tali avanoa ma faʻaoga mea i totonu o le Bootstrap grid system.
E faapefea ona latou galulue
-
O alavai o va i le va o mea o lo'o i totonu o koluma, na faia e ala fa'ata'atia
padding
. Matou te setiinapadding-right
mapadding-left
luga o koluma taʻitasi, ma faʻaoga le leleimargin
e faʻamalo ai i le amataga ma le faaiuga o laina taʻitasi e faʻaoga ai mea. -
O alavai e amata ile
1.5rem
(24px
) lautele. Ole mea lea e mafai ai ona fa'afetaui la tatou fa'asologa i le fua fa'amau ma va'a . -
E mafai ona fetuutuuna'i alavai. Fa'aoga vasega alavai e fa'ata'atia e fa'ata'atia ai alavai, alavai tūsa'o, ma alavai uma.
Alavai faalava
.gx-*
e mafai ona fa'aoga vasega e pulea ai le lautele o le alavai. Atonu e mana'omia ona toe fetu'una'i le .container
po'o .container-fluid
le matua pe afai e fa'aogaina fo'i alavai lapopo'a e 'alofia ai le lolovaia, e fa'aaoga ai se mea fa'aoga fa'apipi'i. Mo se faʻataʻitaʻiga, i le faʻataʻitaʻiga o loʻo mulimuli mai ua matou faʻateleina le padding ma .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>
O se isi fofo o le faʻaopoopoina lea o se afifi faʻatasi .row
ma le .overflow-hidden
vasega:
<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>
Tu'u alavai
.gy-*
e mafai ona fa'aoga vasega e pulea ai le lautele o alavai. E pei o alavai fa'ata'atia, o alavai fa'ata'atia e mafai ona mafua ai le tafe i lalo ole .row
pito o le itulau. Afai e tupu lenei mea, e te faʻaopoopoina se afifi faʻatasi .row
ma le .overflow-hidden
vasega:
<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>
Alavai faalava & sa'o
.g-*
e mafai ona fa'aoga vasega e fa'atonutonu ai le lautele o le alavai fa'ata'atia, mo le fa'ata'ita'iga o lo'o mulimuli mai matou te fa'aogaina le lautele o le alavai la'ititi, o lea e le mana'omia ai le fa'aopoopoina o le .overflow-hidden
vasega afifi.
<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>
Alavai laina alavai
E mafai foi ona faaopoopo vasega alavai i laina koluma . I le faʻataʻitaʻiga o loʻo mulimuli mai, matou te faʻaogaina koluma laina tali ma vasega talivai.
<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>
Leai ni alavai
O alavai i le va o koluma i totonu oa tatou vasega fa'ata'oto e mafai ona aveese i le .g-0
. E aveese ai le leaga margin
s mai .row
ma le faalava padding
mai koluma tamaiti uma.
Manaomia se mamanu pito-i-pito? Tuu le matua .container
pe .container-fluid
.
I le fa'ata'ita'iga, o le fa'aaliga lea. Manatua e mafai ona e faʻaauau pea ona faʻaogaina lenei mea ma isi vasega faʻasologa uma ua uma ona faʻatulagaina (e aofia ai le lautele o koluma, vaega tali, toe faʻatonu, ma isi mea).
<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>
Suia alavai
O vasega e fausia mai le $gutters
faafanua Sass lea na tuufaasolo mai le $spacers
faafanua Sass.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);