Tsiɖɔɖɔɖɔƒewo

Gutters nye padding si le wò sɔtiwo dome, si wozãna tsɔ ɖoa dometsotso kple ɖoɖo ɖe nusiwo le Bootstrap grid ɖoɖoa me ŋu nyuie.

Le axa sia dzi

Ale si wowɔa dɔe

Gutters nye dometsotso siwo le sɔtiwo me nyawo dome, si wowɔ to horizontal padding. Míeɖoa padding-rightkple padding-leftɖe sɔti ɖesiaɖe dzi, eye míezãa negative margintsɔ xea mɔ na ema le fli ɖesiaɖe ƒe gɔmedzedze kple nuwuwu tsɔ ɖoa emenyawo ɖe ɖoɖo nu.
Tsiɖɔɖɔɖɔƒewo dzea egɔme tso 1.5rem( 24px) kekeme. Esia wɔnɛ be míete ŋu sɔna kple míaƒe grid la kple padding kple margin spacers scale la.
Woate ŋu atrɔ asi le tsiɖɔɖɔɖɔɖɔƒewo ŋu wòasɔ ɖe wo nɔewo nu. Zã tsidzɔƒe ƒe hatsotso siwo ku ɖe breakpoint koŋ ŋu nàtsɔ atrɔ asi le tsiɖɔɖɔɖɔɖɔƒe siwo le tsia dzi, tsiɖɔɖɔɖɔɖɔƒe siwo le tsitrenu, kple tsiɖɔɖɔɖɔɖɔƒewo katã ŋu.

Tɔdzisasrã siwo le tsia dzi

.gx-*woate ŋu azã klasswo atsɔ akpɔ tsiɖɔɖɔ ƒe kekeme siwo le tsia dzi la dzi. Ðewohĩ ahiã be woatrɔ asi le .containeralo .container-fluiddzila la ŋu ne wozã tsiɖɔɖɔɖɔɖɔƒe gãwo hã be woaƒo asa na tsi si yɔ fũu si womelɔ̃ o, eye woazã padding utility si sɔ kplii. Le kpɔɖeŋu me, le kpɔɖeŋu si gbɔna me la míedzi padding la ɖe edzi kple .px-4:

Kɔlam ƒe padding si wowɔ ɖe ɖoɖo nu

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>

Egbɔkpɔnu bubue nye be nàtsɔ agbalẽ xatsaxatsa aɖe akpe ɖe eŋu le .rowkple .overflow-hiddenklass la:

Kɔlam ƒe padding si wowɔ ɖe ɖoɖo nu

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>

Tɔdzisasrã siwo le tsitrenu

.gy-*woate ŋu azã klasswo atsɔ akpɔ tsidzɔƒe ƒe kekeme siwo le tsitrenu le fli aɖe me dzi ne sɔtiwo xatsa ɖe fli yeyewo ŋu. Abe tsidzɔƒe siwo le tsia dzi ene la, tsidzɔƒe siwo le tsitrenu ate ŋu ana tsi .rownaɖo tsia dzi vie le axa aɖe ƒe nuwuwu la te. Ne esia dzɔ la, ètsɔa agbalẽ xatsaxatsa aɖe kpena .rowɖe .overflow-hiddenklass la ŋu:

Kɔlam ƒe padding si wowɔ ɖe ɖoɖo nu

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>

Horizontal & tsitrenu tsidzɔƒewo

.g-*woateŋu azã klasswo atsɔ akpɔ tsiɖɔɖɔ ƒe kekeme siwo le tsia dzi la dzi, na kpɔɖeŋu si gbɔna la míezãa tsiɖɔɖɔ ƒe kekeme si le sue wu, eyata mahiã be woatsɔ .overflow-hiddenwrapper ƒe hatsotso la akpe ɖe eŋu o.

Kɔlam ƒe padding si wowɔ ɖe ɖoɖo nu

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>

Fli sɔtiwo gutters

Woate ŋu atsɔ gutter ƒe klasswo hã akpe ɖe fli ƒe sɔtiwo ŋu . Le kpɔɖeŋu si gbɔna me la, míezãa fli ƒe sɔti siwo ɖoa nya ŋu kple gutter ƒe hatsotso siwo ɖoa nya ŋu.

Fli ƒe sɔti

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>

Tɔdzisasrã aɖeke meli o

Woate ŋu aɖe tsiɖɔɖɔ siwo le sɔtiwo dome le míaƒe grid ƒe hatsotso siwo míeɖo do ŋgɔ me la ɖa kple .g-0. Esia ɖea margins manyomanyowo ɖa le ɖeviwo ƒe sɔti siwo katã le enumake .rowla me kple esiwo le tsia dzi la ɖa.padding

Èhiã aɖaŋu si wowɔ tso nugbɔ vaseɖe nugbɔa? Tsɔ dzila la ƒu gbe .containeralo .container-fluideye nàtsɔe akpe .mx-0ɖe eŋu .rowbe wòagayɔ fũ o.

Le nuwɔna me la, alesi wòdzenae nye esi. De dzesii be àteŋu ayi edzi azã esia kple grid ƒe hatsotso bubu siwo katã woɖo ɖi do ŋgɔ (siwo dometɔ aɖewoe nye sɔti ƒe kekeme, ŋuɖoɖo ƒe dzidzenuwo, ɖoɖo yeyewo, kple bubuwo).

.kɔl-sm-6 .kɔl-md-8

.kɔl-6 .kɔl-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>

Trɔ tsiɖɔɖɔɖɔƒeawo

Wotua klasswo tso $guttersSass ƒe anyigbatata si ƒe dome wonyi tso $spacersSass ƒe anyigbatata me.

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