talang
Gutters minangka padding ing antarane kolom sampeyan, digunakake kanggo menehi spasi kanthi responsif lan nyelarasake isi ing sistem kothak Bootstrap.
Carane padha bisa
-
Gutters minangka longkangan antarane isi kolom, digawe dening horisontal
padding
. Kita nyetelpadding-right
lanpadding-left
ing saben kolom, lan nggunakake negatifmargin
kanggo 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 .container
utawa .container-fluid
wong 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
:
<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 yaiku nambahake bungkus .row
ing .overflow-hidden
kelas kasebut:
<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 vertikal
.gy-*
kelas bisa digunakake kanggo ngontrol widths talang vertikal. Kaya talang horisontal, talang vertikal bisa njalari kebanjiran ing ngisor kaca .row
ing pungkasan kaca. Yen kedadeyan kasebut, sampeyan nambahake bungkus .row
karo .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 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-hidden
kelas pambungkus.
<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>
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.
<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>
Ora ana talang
Talang ing antarane kolom ing kelas kothak sing wis ditemtokake bisa dicopot nganggo .g-0
. Iki mbusak s negatif margin
saka .row
lan horisontal padding
saka kabeh kolom anak langsung.
Perlu desain pinggiran-kanggo-pinggiran? Selehake wong tuwa .container
utawa .container-fluid
.
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).
<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 dibangun saka $gutters
peta Sass sing diwarisake saka $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,
);