talang

Gutters minangka padding ing antarane kolom sampeyan, digunakake kanggo menehi spasi kanthi responsif lan nyelarasake isi ing sistem kothak Bootstrap.

Ing kaca iki

Carane padha bisa

Gutters minangka longkangan antarane isi kolom, digawe dening horisontal padding. Kita nyetel padding-rightlan padding-lefting saben kolom, lan nggunakake negatif marginkanggo ngimbangi sing ing wiwitan lan pungkasan saben baris kanggo kempal isi.
Gutters miwiti ing 1.5rem( 24px) amba. Iki ngidini kita cocog karo kothak kanggo padding lan skala spacer margin .
Gutters bisa diatur kanthi responsif. Gunakake kelas talang khusus breakpoint kanggo ngowahi talang horisontal, talang vertikal, lan kabeh talang.

Talang horisontal

.gx-*kelas bisa digunakake kanggo ngontrol widths talang horisontal. Wong tuwa .containerutawa .container-fluidwong tuwa bisa uga kudu diatur yen talang sing luwih gedhe uga digunakake kanggo ngindhari kebanjiran sing ora dikarepake, nggunakake sarana padding sing cocog. Contone, ing conto ing ngisor iki kita wis nambah padding karo .px-4:

Padding kolom khusus

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>

Solusi alternatif yaiku nambahake bungkus .rowing .overflow-hiddenkelas kasebut:

Padding kolom khusus

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>

talang vertikal

.gy-*kelas bisa digunakake kanggo ngontrol widths talang vertikal ing baris nalika kolom Lebokake kanggo baris anyar. Kaya talang horisontal, talang vertikal bisa njalari kebanjiran ing ngisor kaca .rowing pungkasan kaca. Yen kedadeyan kasebut, sampeyan nambahake bungkus .rowkaro .overflow-hiddenkelas:

Padding kolom khusus

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>

Talang horisontal & vertikal

.g-*kelas bisa digunakake kanggo ngontrol jembaré talang horisontal, kanggo conto ing ngisor iki kita nggunakake jembaré talang cilik, supaya ana ora perlu kanggo nambah .overflow-hiddenkelas pambungkus.

Padding kolom khusus

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>

Kolom baris talang

Kelas gutter uga bisa ditambahake menyang kolom baris . Ing conto ing ngisor iki, kita nggunakake kolom baris responsif lan kelas talang responsif.

Kolom baris

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>

Ora ana talang

Talang ing antarane kolom ing kelas kothak sing wis ditemtokake bisa dicopot nganggo .g-0. Iki mbusak s negatif marginsaka .rowlan horisontal paddingsaka kabeh kolom anak langsung.

Perlu desain pinggiran-kanggo-pinggiran? Selehake wong tuwa .containerutawa .container-fluidlan tambahake .mx-0kanggo .rownyegah kebanjiran.

Ing laku, iki carane katon. Elinga, sampeyan bisa terus nggunakake iki karo kabeh kelas kothak liyane sing wis ditemtokake (kalebu jembar kolom, tingkat responsif, reorders, lan liya-liyane).

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

Ganti talang

Kelas dibangun saka $gutterspeta Sass sing diwarisake saka $spacerspeta Sass.

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