talang
Gutters nyaéta padding antara kolom anjeun, dipaké pikeun responsif spasi tur align eusi dina sistem grid Bootstrap.
Kumaha aranjeunna dianggo
-
Gutters mangrupakeun sela antara eusi kolom, dijieun ku horizontal
padding
. Urang nyetelpadding-right
napadding-left
on unggal kolom, sarta ngagunakeun négatipmargin
mun 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 horizontal
.gx-*
kelas bisa dipaké pikeun ngadalikeun lebar talang horizontal. Indungna .container
atanapi .container-fluid
indungna 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
:
<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>
Solusi alternatif nyaéta nambihan bungkus di sabudeureun .row
kelas .overflow-hidden
:
<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>
talang nangtung
.gy-*
kelas bisa dipaké pikeun ngadalikeun rubak talang nangtung. Kawas talang horisontal, talang nangtung bisa nimbulkeun lobana di handap .row
dina tungtung kaca. Upami ieu kajantenan, anjeun tambahkeun bungkus .row
sareng .overflow-hidden
kelas:
<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>
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-hidden
kelas wrapper.
<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>
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.
<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>
Taya talang
The talang antara kolom dina kelas grid tos siap kami bisa dihapus kalawan .g-0
. Ieu ngaluarkeun margin
s négatip tina .row
jeung horizontal padding
ti sakabeh kolom barudak saharita.
Peryogi desain ujung-ka-ujung? Leupaskeun kolot .container
atawa .container-fluid
.
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).
<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>
Ganti talang
Kelas diwangun tina $gutters
peta Sass anu diwariskeun tina $spacers
peta Sass.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);