talang

Gutters nyaéta padding antara kolom anjeun, dipaké pikeun responsif spasi tur align eusi dina sistem grid Bootstrap.

Dina kaca ieu

Kumaha aranjeunna dianggo

Gutters mangrupakeun sela antara eusi kolom, dijieun ku horizontal padding. Urang nyetel padding-rightna padding-lefton unggal kolom, sarta ngagunakeun négatip marginmun offset yén di mimiti jeung tungtung unggal baris pikeun align eusi.
Gutters dimimitian dina 1.5rem( 24px) lega. Hal ieu ngamungkinkeun urang pikeun nyocogkeun grid urang jeung padding jeung skala spacers margin .
Gutters tiasa disaluyukeun responsif. Anggo kelas talang khusus breakpoint pikeun ngarobih talang horizontal, talang nangtung, sareng sadaya talang.

talang horisontal

.gx-*kelas bisa dipaké pikeun ngadalikeun lebar talang horizontal. Indungna .containeratanapi .container-fluidindungna kedah disaluyukeun upami talang anu langkung ageung dianggo ogé pikeun ngahindarkeun luapan anu teu dihoyongkeun, nganggo utilitas padding anu cocog. Contona, dina conto di handap ieu kami geus ngaronjat padding kalawan .px-4:

Padding kolom custom

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 nyaéta nambihan bungkus di sabudeureun .rowkelas .overflow-hidden:

Padding kolom custom

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 nangtung

.gy-*kelas bisa dipaké pikeun ngadalikeun rubak talang nangtung dina baris lamun kolom mungkus ka garis anyar. Kawas talang horisontal, talang nangtung bisa nimbulkeun lobana di handap .rowdina tungtung kaca. Upami ieu kajantenan, anjeun tambahkeun bungkus .rowsareng .overflow-hiddenkelas:

Padding kolom custom

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 horizontal & vertikal

.g-*kelas bisa dipaké pikeun ngadalikeun lebar talang horizontal, pikeun conto di handap ieu kami nganggo rubak talang leutik, jadi aya moal kudu nambahan .overflow-hiddenkelas wrapper.

Padding kolom custom

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>

Baris kolom talang

Kelas talang ogé bisa ditambahkeun kana kolom baris . Dina conto di handap ieu, kami nganggo kolom baris responsif sareng 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>

Taya talang

The talang antara kolom dina kelas grid tos siap kami bisa dihapus kalawan .g-0. Ieu ngaluarkeun margins négatip tina .rowjeung horizontal paddingti sakabeh kolom barudak saharita.

Peryogi desain ujung-ka-ujung? Leupaskeun indungna .containeratawa .container-fluidjeung tambahkeun .mx-0ka .rowpikeun nyegah mudal.

Dina prakna, ieu kumaha rupana. Catet yén anjeun tiasa teras-terasan ngagunakeun ieu sareng sadaya kelas grid anu tos siapkeun (kalebet lebar kolom, tingkatan responsif, susunan ulang, sareng seueur deui).

.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 diwangun tina $gutterspeta Sass anu diwariskeun tina $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,
);