Goutyè yo

Goutyè yo se padding ki genyen ant kolòn ou yo, yo itilize pou reponn ak aliman kontni nan sistèm nan kadriyaj Bootstrap.

Nan paj sa a

Ki jan yo travay

Goutyè yo se twou vid ki genyen ant kontni kolòn, ki te kreye pa orizontal padding. Nou mete padding-rightak padding-leftsou chak kolòn, epi sèvi ak negatif marginkonpanse sa nan kòmansman ak nan fen chak ranje aliman kontni.
Goutyè yo kòmanse nan 1.5rem( 24px) lajè. Sa a pèmèt nou matche ak kadriyaj nou an ak echèl la padding ak espas maj .
Goutyè yo ka ajiste an repons. Sèvi ak klas rupture-espesifik goutyè pou modifye goutyè orizontal, goutyè vètikal, ak tout goutyè.

Goutyè orizontal

.gx-*klas yo ka itilize pou kontwole lajè goutyè orizontal yo. Paran an .containerka .container-fluidbezwen ajiste si pi gwo goutyè yo itilize tou pou evite debòde sipèfli, lè l sèvi avèk yon sèvis piblik matche. Pou egzanp, nan egzanp sa a nou te ogmante padding la ak .px-4:

Custom kolòn padding

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>

Yon solisyon altènatif se ajoute yon anbalaj alantou klas .rowla .overflow-hidden:

Custom kolòn padding

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>

Goutyè vètikal

.gy-*klas yo ka itilize pou kontwole lajè goutyè vètikal yo nan yon ranje lè kolòn vlope nan nouvo liy. Tankou goutyè orizontal yo, goutyè vètikal yo ka lakòz kèk debòde anba a .rownan fen yon paj. Si sa rive, ou ajoute yon wrapper alantou .rowak .overflow-hiddenklas la:

Custom kolòn padding

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>

Goutyè orizontal & vètikal

.g-*klas yo ka itilize pou kontwole lajè goutyè orizontal yo, pou egzanp sa a nou itilize yon lajè goutyè ki pi piti, kidonk pa pral gen yon bezwen ajoute .overflow-hiddenklas la wrapper.

Custom kolòn padding

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>

Ranje kolòn goutyè

Yo ka ajoute klas goutyè nan kolòn ranje tou . Nan egzanp sa a, nou itilize kolòn ranje ki reponn ak klas goutyè ki reponn.

Kolòn ranje

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>

Pa gen goutyè

Goutyè ki genyen ant kolòn nan klas griy predefini nou yo ka retire ak .g-0. Sa a retire negatif marginyo nan .rowak orizontal la paddingnan tout kolòn timoun imedya.

Bezwen yon konsepsyon kwen-a-bò? Lage paran an .containeroswa .container-fluidepi ajoute .mx-0nan .rowpou anpeche debòde.

Nan pratik, men ki jan li sanble. Remake byen ou ka kontinye itilize sa a ak tout lòt klas griy predefini (ki gen ladan lajè kolòn, nivo ki reponn, rekòmande, ak plis ankò).

.col-sm-6 .col-md-8

.col-6 .col-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>

Chanje goutyè yo

Klas yo bati nan $gutterskat Sass la ki eritye nan $spacerskat Sass la.

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