Gutɛriw

Gutters ye padding ye i ka kuluw ni ɲɔgɔn cɛ, min bɛ Kɛ ka jaabiw di yɔrɔ ma ani ka kɔnɔkow Labɛn Bootstrap grid system kɔnɔ.

Nin ɲɛ in kan

U bɛ baara kɛ cogo min na

Gutters ye yɔrɔw ye minnu bɛ koloma kɔnɔkow ni ɲɔgɔn cɛ, minnu bɛ dabɔ ni horizontal ye padding. An bɛ sigi padding-rightani padding-leftkulu kelen-kelen bɛɛ kan, ka baara kɛ ni negetif marginye walasa k’o offset kɛ jirisun kelen-kelen bɛɛ daminɛ na ani a laban na walasa ka kɔnɔkow labɛn.
Gutters bɛ daminɛ ni 1.5rem( 24px) bonya ye. O b’a To an bɛ Se k’an ka jatebɔlan Bɛn ni padding ani margin spacers scale ye.
Gutters bɛ se ka ladilan ka kɛɲɛ ni jaabi ye. Aw bɛ baara kɛ ni kariyɔrɔ kɛrɛnkɛrɛnnenw ka jibolisiraw ye walasa ka jibolisira jɔlenw, jibolisira jɔlenw, ani jibolisiraw bɛɛ ladilan.

Gutters horizontales (jibɔlanw).

.gx-*kalanw bɛ se ka kɛ ka jibolisiraw bonya tilennenw kɔlɔsi. A bɛ se ka kɛ ko .containera walima .container-fluidbangebaga ka kan ka ladilan ni jibolisira belebelebaw fana bɛ kɛ walasa ka jibɔlanw bali minnu man ɲi, ka baara kɛ ni padding utility ye min bɛ bɛn o ma. Misali la, misali nata la an ye dɔ fara padding kan ni .px-4:

Kolon padding min bɛ kɛ ka kɛɲɛ ni mɔgɔw sago ye

html ye

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

Fɛn wɛrɛ min bɛ se ka kɛ, o ye ka finimugu dɔ fara a kan ka a lamini .rowni .overflow-hiddenkalan ye:

Kolon padding min bɛ kɛ ka kɛɲɛ ni mɔgɔw sago ye

html ye

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

Gutters jɔlenw

.gy-*kalasi bɛ se ka kɛ ka jibolisira jɔlenw bonya kɔlɔsi jirisun dɔ kɔnɔ ni kuluw bɛ siri ka kɛ tigɛli kura ye. I n’a fɔ jibolisiraw jɔlenw, jibolisiraw jɔlenw bɛ se ka kɛ sababu ye ka jibɔ dɔw .rowkɛ ɲɛ dɔ laban na duguma. N’o Kɛra, i bɛ dakun dɔ Fàra a kan .rowni .overflow-hiddenkalasi ye:

Kolon padding min bɛ kɛ ka kɛɲɛ ni mɔgɔw sago ye

html ye

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

Gutters horizontales & verticales (jibɔlanw).

.g-*kalasi bɛ se ka kɛ ka jibolisiraw bonya tilennenw kɔlɔsi, misali nata in na an bɛ baara kɛ ni jibolisiraw bonya fitinin ye, o la, mago tɛna kɛ ka wuluwulu .overflow-hiddenkalasi fara a kan.

Kolon padding min bɛ kɛ ka kɛɲɛ ni mɔgɔw sago ye

html ye

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

Row kolonw gutters

Gutter classes fana bɛ se ka fara jirisunw kan . Misali nata la, an bɛ baara kɛ ni jaabiw ye minnu bɛ wele ko row columns ani responsive gutter classes.

Layini koloma

html ye

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

Gutters tɛ yen

kuluw ni ɲɔgɔn cɛ jibolisiraw an ka jatebɔ kalansenw kɔnɔ minnu ɲɛfɔlen don ka kɔn , olu bɛ se ka bɔ ni .g-0. marginO bɛ s juguw bɔ .rowani horizontal paddingka bɔ denmisɛnw ka kolomayɔrɔw bɛɛ la.

Aw mago bɛ dilan na min bɛ bɔ dakun na ka taa a dan na wa? Aw bɛ bangebaga .containerwalima .container-fluidka fara a kan .mx-0walasa ka .rowa bali ka tɛmɛ.

Tiɲɛ na, a bɛ cogo min na, o filɛ nin ye. A kɔlɔsi ko i bɛ se ka t’a fɛ ka baara kɛ ni nin ye ni jatebɔlan tɔw bɛɛ ye minnu ɲɛfɔlen don ka kɔn (o la, kuluw bonya, jaabiw, jatebɔcogo kura, ani fɛn wɛrɛw).

.koli-sm-6 .kol-md-8

.koli-6 .kol-md-4

html ye

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

Aw bɛ jibolisiraw Changer

Kalansow bɛ jɔ ka bɔ $guttersSass karti la min bɛ ciyɛn ta ka bɔ $spacersSass karti la.

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