Nsu a ɛkɔ nsu mu

Gutters yɛ padding a ɛda wo columns ntam, a wɔde di dwuma de responsively space ne align content wɔ Bootstrap grid system no mu.

Wɔ kratafa yi so

Sɛnea wɔyɛ adwuma

Gutters yɛ nsonsonoe a ɛda column content ntam, a horizontal padding. Yɛde padding-rightne padding-leftwɔ column biara so, na yɛde negative di dwuma marginde offset saa wɔ row biara mfiase ne n’awiei de hyɛ nsɛm a ɛwɔ mu no hyia.
Gutters fi ase wɔ 1.5rem( 24px) a ɛtrɛw. Wei ma yɛtumi de yɛn grid no ne padding ne margin spacers scale no hyia.
Wobetumi ayɛ nsakrae wɔ nsu a ɛkɔ nsu mu no mu ma ɛyɛ adwuma. Fa breakpoint-specific gutter classes di dwuma fa sesa horizontal gutters, vertical gutters, ne gutters nyinaa.

Nsu a ɛkɔ soro a ɛkɔ soro

.gx-*wobetumi de adesua ahorow adi dwuma de ahwɛ gutter no trɛw a ɛkɔ soro no so. Ebia ɛho behia sɛ wɔyɛ nsakrae wɔ .containeranaa .container-fluidɔwofo no mu sɛ wɔde gutter akɛse nso di dwuma na wɔakwati nsu a ɛsen a wɔmpɛ, de padding utility a ɛne no hyia di dwuma a. Sɛ nhwɛso no, wɔ nhwɛso a edidi so yi mu no yɛde .px-4:

Custom column padding a wɔde ahyɛ mu

html na ɛwɔ hɔ

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

Ano aduru foforo ne sɛ wode wrapper bɛka ho atwa .rowne .overflow-hiddenadesuakuw no ho ahyia:

Custom column padding a wɔde ahyɛ mu

html na ɛwɔ hɔ

<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 a ɛda hɔ gyina hɔ

.gy-*wobetumi de adesua ahorow adi dwuma de ahwɛ gutter ntrɛwmu a ɛda hɔ no so wɔ row bi mu bere a adum ahorow no kyekyere nkyerɛwde foforo no. Te sɛ nsu a ɛkɔ soro no, nsu a ɛkɔ soro no betumi ama nsu a .rowɛtɔ gu fam kakra wɔ kratafa bi awiei no ase. Sɛ eyi ba a, wode wrapper bi bɛka .rowadesua .overflow-hiddenno ho:

Custom column padding a wɔde ahyɛ mu

html na ɛwɔ hɔ

<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 & vertical nsu a ɛkɔ fam

.g-*classes betumi adi dwuma de ahwɛ horizontal gutter widths no so, ma nhwɛso a edidi so yi yɛde gutter width ketewaa bi di dwuma, enti ɛho renhia sɛ yɛde .overflow-hiddenwrapper class no bɛka ho.

Custom column padding a wɔde ahyɛ mu

html na ɛwɔ hɔ

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

Wobetumi nso de gutter adesua ahorow aka row columns ho . Wɔ nhwɛsoɔ a ɛdidi soɔ yi mu no, yɛde responsive row columns ne responsive gutter classes di dwuma.

Row kɔla no

html na ɛwɔ hɔ

<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 biara nni hɔ

Wobetumi de .g-0. Eyi yi margins a enye no fi .rowne nea ɛwɔ soro no paddingfi mmofra adum a ɛwɔ hɔ ntɛm nyinaa nyinaa mu.

Wohia adwini a efi ano kosi ano? Tow ɔwofo no gu .containeranaa .container-fluidna fa ka .mx-0ho na .rowamma nsu a ɛboro so no ankɔ so.

Wɔ nneyɛe mu no, sɛnea ɛte ni. Hyɛ no nsow sɛ wubetumi akɔ so de eyi adi dwuma wɔ grid adesua afoforo a wɔadi kan akyerɛkyerɛ mu nyinaa (a column trɛw, mmuae tiers, reorders, ne nea ɛkeka ho ka ho).

.kol-sm-6 .kol-md-8 na ɛwɔ hɔ

.kol-6 .kol-md-4 na ɛwɔ hɔ

html na ɛwɔ hɔ

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

Sesa nsu a ɛkɔ nsu mu no

Wɔkyekye adesua ahorow no fi $guttersSass asase mfonini a wonya fi $spacersSass asase mfonini no mu.

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