Emifulejje

Gutters ye padding wakati wa columns zo, ekozesebwa responsively space n'okusengeka ebirimu mu Bootstrap grid system.

Ku muko guno

Engeri gye zikolamu

Gutters bye bifo ebiri wakati w’ebirimu empagi, ebitondebwawo horizontal padding. Tuteeka padding-rightne padding-leftku buli mpagi, era tukozesa negativu marginokuziyiza ekyo ku ntandikwa n’enkomerero ya buli lunyiriri okulaganya ebirimu.
Emifulejje gitandika ku 1.5rem( 24px) obugazi. Kino kitusobozesa okukwataganya grid yaffe ku padding ne margin spacers scale.
Gutters zisobola okutereezebwa mu ngeri eddamu. Kozesa ebika by’emifulejje egy’enjawulo egy’okumenya okukyusa emifulejje egy’okwebungulula, emifulejje egy’okwesimbye, n’emidumu gyonna.

Emifulejje egy’okwebungulula

.gx-*kiraasi zisobola okukozesebwa okufuga obugazi bw’emidumu egy’okwebungulula. Omuzadde .containeroba .container-fluidomuzadde ayinza okwetaaga okutereezebwa singa emidumu eminene nagyo gikozesebwa okwewala okujjula okuteetaagibwa, nga bakozesa ekintu ekikwatagana ne padding utility. Okugeza, mu kyokulabirako kino wammanga twongedde ku padding nga .px-4:

Okupakinga empagi eza custom

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>

Eky’okugonjoola ekirala kwe kwongerako ekizingirizi okwetooloola .rowne .overflow-hiddenkiraasi:

Okupakinga empagi eza custom

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>

Emifulejje egy’ennyiriri (vertical gutters).

.gy-*kiraasi zisobola okukozesebwa okufuga obugazi bw’emidumu egy’ennyiriri munda mu lunyiriri nga empagi zizinga okutuuka ku layini empya. Okufaananako n’emifulejje egy’okwesimbye, emifulejje egy’okwesimbye giyinza okuleeta okukulukuta okumu wansi w’oku .rownkomerero y’olupapula. Kino bwe kibaawo, oyongerako ekizingirizi okwetoloola .rowne .overflow-hiddenkiraasi:

Okupakinga empagi eza custom

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>

Emifulejje egy’okwebungulula & egy’okwesimbye

.g-*classes zisobola okukozesebwa okufuga obugazi bwa gutter obw’okwebungulula, olw’ekyokulabirako kino wammanga tukozesa obugazi bwa gutter obutono, kale tewajja kubaawo bwetaavu bwa kwongerako .overflow-hiddenkiraasi ya wrapper.

Okupakinga empagi eza custom

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>

Ennyiriri empagi gutters

Gutter classes nazo zisobola okugattibwa ku mpagi z'ennyiriri . Mu kyokulabirako kino wammanga, tukozesa empagi z’ennyiriri eziddamu ne kiraasi za gutter eziddamu.

Ennyiriri ennyiriri

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>

Tewali mifulejje

Emifulejje wakati w'empagi mu bibinja byaffe ebya giridi ebyategekebwa edda bisobola okuggyibwawo ne .g-0. Kino kiggyawo negativu margins okuva .rowne horizontal paddingokuva mu mpagi zonna ez’abaana ab’amangu.

Oyagala dizayini okuva ku mbiriizi okutuuka ku mbiriizi? Suula omuzadde .containeroba .container-fluidera osseeko .mx-0ku .rowkuziyiza okujjula.

Mu nkola, laba engeri gye kirabika. Weetegereze osobola okugenda mu maaso n’okukozesa kino ne kiraasi za grid endala zonna ezitegekeddwa edda (nga mw’otwalidde obugazi bw’ennyiriri, emitendera egy’okuddamu, okuddamu ensengeka, n’ebirala).

.kolo-sm-6 .kol-md-8

.kol-6 .kolo-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>

Kyuusa emidumu gy’amazzi

Ebisulo bizimbibwa okuva ku $guttersmaapu ya Sass esikirwa okuva ku $spacersmaapu ya Sass.

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