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.

I luga o lenei itulau

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 setiina padding-rightma padding-leftluga o koluma taʻitasi, ma faʻaoga le lelei margine 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 .containerpo'o .container-fluidle 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:

Fa'apipi'i koluma fa'apitoa

html

<div class="container px-4 text-center">
  <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 .rowma le .overflow-hiddenvasega:

Fa'apipi'i koluma fa'apitoa

html

<div class="container overflow-hidden text-center">
  <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 i totonu o se laina pe a afifi koluma i laina fou. E pei o alavai fa'ata'atia, o alavai fa'ata'atia e mafai ona mafua ai le tafe i lalo ole .rowpito o le itulau. Afai e tupu lenei mea, e te faʻaopoopoina se afifi faʻatasi .rowma le .overflow-hiddenvasega:

Fa'apipi'i koluma fa'apitoa

html

<div class="container overflow-hidden text-center">
  <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-hiddenvasega afifi.

Fa'apipi'i koluma fa'apitoa

html

<div class="container text-center">
  <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.

Koluma laina

html

<div class="container text-center">
  <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 margins mai .rowma le faalava paddingmai koluma tamaiti uma.

Manaomia se mamanu pito-i-pito? Pa'u le matua .containerpo'o .container-fluidle fa'aopoopo .mx-0i le tusi .rowe taofia ai le sosolo.

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).

.col-sm-6 .col-md-8

.col-6 .col-md-4

html

<div class="row g-0 text-center">
  <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 $guttersfaafanua Sass lea na tuufaasolo mai le $spacersfaafanua Sass.

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