Imijelo

Iigutter zilukhuko phakathi kweekholamu zakho, ezisetyenziselwa ukuphendula indawo kunye nokulungelelanisa umxholo kwinkqubo yegridi yeBootstrap.

Kweli phepha

Indlela abasebenza ngayo

Imijelo yizikhewu phakathi komxholo wekholomu, owenziwe ngokuthe tye padding. Siseta padding-rightkwaye padding-leftkwikholamu nganye, kwaye sisebenzise i-negative marginukulungisa oko ekuqaleni nasekupheleni komqolo ngamnye ukulungelelanisa umxholo.
Iigatha ziqala ku 1.5rem( 24px) ububanzi. Oku kusivumela ukuba sifanise igridi yethu kunye ne- padding kunye ne-margin spacers isikali.
Iigutters zinokulungiswa ngokuphendulayo. Sebenzisa i-breakpoint-specific gutter classes ukuguqula i-gutters ezithe tye, ii-gutters ezithe nkqo, kunye nazo zonke iigatha.

Iigatha ezithe tye

.gx-*iiklasi zingasetyenziselwa ukulawula ububanzi bomjelo othe tye. Umzali .containerokanye .container-fluidumzali unokufuna ukulungiswa ukuba iigatha ezinkulu zisetyenziselwa ukuphepha ukuphuphuma okungafunekiyo, kusetyenziswa into ehambelanayo yokudibanisa. Umzekelo, kulo mzekelo ulandelayo sonyuse i-padding nge .px-4:

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

Esinye isisombululo kukongeza isisongelo esijikeleze .rowiklasi .overflow-hidden:

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

Iigatha ezithe nkqo

.gy-*Iiklasi zingasetyenziselwa ukulawula ububanzi begutter ethe nkqo ngaphakathi kumqolo xa iikholamu zisonga kwimigca emitsha. Njengeegatha ezithe tye, iigatha ezithe nkqo zinokubangela ukuphuphuma okuthile ngaphantsi .rowkwesiphelo sephepha. Ukuba oku kuyenzeka, wongeza usonga .rowkunye .overflow-hiddenneklasi:

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

Iigatha ezithe tyaba kunye nezithe nkqo

.g-*iiklasi zingasetyenziselwa ukulawula ububanzi bomjelo othe tye, kulo mzekelo ulandelayo sisebenzisa ububanzi obuncinci begutter, ngoko ke akuyi kubakho mfuneko yokongeza .overflow-hiddenudidi lwe-wrapper.

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

Iikholamu zomqolo iigatha

Iiklasi ze-Gutter nazo zinokongezwa kwiikholamu zomqolo . Kulo mzekelo ulandelayo, sisebenzisa iikholamu zomqolo ophendulayo kunye neeklasi eziphendulayo zegutter.

Umqolo womqolo

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>

Akukho zigatha

Imijelo phakathi kweentsika kwiiklasi zethu zegridi ezichazwe kwangaphambili zinokususwa nge .g-0. Oku kususa i-negative margins ukusuka .rowkunye ne-horizontal paddingkuzo zonke iikholamu zabantwana zangoku.

Ngaba ufuna uyilo olusuka kumphetho ukuya kumphetho? Lahla umzali .containerokanye .container-fluidwongeze .mx-0kwi .rowukunqanda ukuphuphuma.

Ngokwenza, nantsi indlela ekhangeleka ngayo. Qaphela ungaqhubeka nokusebenzisa oku kunye nazo zonke ezinye iiklasi zegridi ezichazwe kwangaphambili (kubandakanya ububanzi bekholamu, imigangatho ephendulayo, uodolo ngokutsha, kunye nokunye).

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

Shintsha iigutters

Iiklasi zakhiwe kwimephu ye- $guttersSass ezuzwe njengelifa $spacerskwimephu ye-Sass.

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