Gɔta dɛn

Gutters na di padding bitwin yu kɔlɔm dɛn, we dɛn kin yuz fɔ rispɔnsiv wan spɛs ɛn alaynɛd kɔntinyu na di Bootstrap grid sistem.

Na dis pej

Aw dɛn de wok

Gɔta na di gap dɛn bitwin di tin dɛn we de insay di kɔlɔm, we dɛn mek bay ɔrizɔntal padding. Wi de sɛt padding-rightɛn padding-leftpan ɛni kɔlɔm, ɛn yuz nɛgitiv marginfɔ ɔfset dat na di stat ɛn ɛnd fɔ ɛni row fɔ alaynɛd kɔntinyu.
Di gɔta dɛn kin bigin na 1.5rem( 24px) waid. Dis de mek wi ebul fɔ mach wi grid to di padding ɛn margin spacers skel.
Dɛn kin ajɔst di gɔta dɛn fayn fayn wan. Yuz brekpoint-spɛsifi k gɔta klas fɔ chenj ɔrizɔntal gɔta, vertikal gɔta, ɛn ɔl di gɔta dɛn.

Ɔrizɔntal gɔta dɛn

.gx-*klas dɛn kin yuz fɔ kɔntrol di ɔrizɔntal gɔta wit dɛn. Di .containerɔ mama ɔ .container-fluidpapa kin nid fɔ ajɔst if dɛn yuz big gɔta dɛn bak fɔ mek dɛn nɔ ful-ɔp we dɛn nɔ want, yuz wan yutiliti fɔ pad we de mach. Fɔ ɛgzampul, insay di ɛgzampul we de dɔŋ ya wi dɔn inkrisayz di padding wit .px-4:

Kastom kɔlɔm padding

html na di pikchɔ

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

Wan ɔda we fɔ sɔlv di prɔblɛm na fɔ ad wan wrap rawnd di .rowwit di .overflow-hiddenklas:

Kastom kɔlɔm padding

html na di pikchɔ

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

Vertikal gɔta dɛn

.gy-*klas dɛn kin yuz fɔ kɔntrol di vertikal gɔta wit dɛn insay wan row we kɔlɔm dɛn rap to nyu layn dɛn. Lɛk di ɔrizɔntal gɔta dɛn, di vertikal gɔta dɛn kin mek sɔm ɔvaflɔ dɔŋ di .rowna di ɛnd pan wan pej. If dis apin, yu ad wan wrap rawnd .rowwit di .overflow-hiddenklas:

Kastom kɔlɔm padding

html na di pikchɔ

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

Ɔrizɔntal & vertikal gɔta dɛn

.g-*klas dɛn kin yuz fɔ kɔntrol di ɔrizɔntal gɔta wit, fɔ di ɛgzampul we de kam wi de yuz wan smɔl gɔta wit, so nid nɔ go de fɔ ad di .overflow-hiddenwrap klas.

Kastom kɔlɔm padding

html na di pikchɔ

<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 kɔlɔm dɛn we gɛt gɔta dɛn

Yu kin ad gɔta klas dɛn bak to row kɔlɔm dɛn . Insay di ɛgzampul we de kam, wi de yuz rispɔnsiv rɔw kɔlɔm ɛn rispɔnsiv gɔta klas dɛn.

Row kɔlɔm

html na di pikchɔ

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

Nɔ gɛt gɔta dɛn

Di gɔta dɛn bitwin kɔlɔm dɛn na wi grid klas dɛn we wi dɔn disayd fɔ du, yu kin pul am wit .g-0. Dis de pul di negatif margins frכm .rowεn di כrizכnal paddingfrכm כl di imεdiεt pikin kכlכm dεm.

Nid wan ed-to-ed dizayn? Drɔp di mama ɔ papa .containerɔ .container-fluidɛn ad .mx-0to di .rowfɔ mek i nɔ bɔku.

In praktis, na so i luk. Notis se yu kin kɔntinyu fɔ yuz dis wit ɔl di ɔda grid klas dɛn we dɛn dɔn pridifayn (inklud di kɔlɔm dɛn wit, di taya dɛn we de ansa, di ɔda tin dɛn we dɛn dɔn ɔda, ɛn ɔda tin dɛn).

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

.kɔl-6 .kɔl-md-4

html na di pikchɔ

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

Chenj di gɔta dɛn

Klas dɛn bil frɔm di $guttersSass map we dɛn inhɛrit frɔm di $spacersSass map.

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