in English

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

<div class="container px-4">
  <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

<div class="container overflow-hidden">
  <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. 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

<div class="container overflow-hidden">
  <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

<div class="container">
  <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

<div class="container">
  <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-fluid.

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

<div class="row g-0">
  <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,
);