Talang
Talang adalah bantalan di antara kolom Anda, digunakan untuk memberi ruang secara responsif dan menyelaraskan konten dalam sistem kisi Bootstrap.
Bagaimana mereka bekerja?
-
Talang adalah celah antara konten kolom, dibuat oleh horizontal
padding
. Kami mengaturpadding-right
danpadding-left
pada setiap kolom, dan menggunakan negatifmargin
untuk mengimbanginya di awal dan akhir setiap baris untuk menyelaraskan konten. -
Talang mulai dari
1.5rem
(24px
) lebar. Ini memungkinkan kita untuk mencocokkan grid kita dengan skala padding dan margin spacer . -
Talang dapat disesuaikan secara responsif. Gunakan kelas talang khusus breakpoint untuk memodifikasi talang horizontal, talang vertikal, dan semua talang.
Talang horisontal
.gx-*
kelas dapat digunakan untuk mengontrol lebar talang horizontal. Orang tua .container
atau .container-fluid
mungkin perlu disesuaikan jika talang yang lebih besar digunakan juga untuk menghindari luapan yang tidak diinginkan, menggunakan utilitas padding yang cocok. Misalnya, dalam contoh berikut kami telah meningkatkan padding dengan .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 adalah menambahkan pembungkus di sekitar .row
dengan .overflow-hidden
kelas:
<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 dapat digunakan untuk mengontrol lebar talang vertikal. Seperti talang horizontal, talang vertikal dapat menyebabkan limpahan di bawah .row
di akhir halaman. Jika ini terjadi, Anda menambahkan pembungkus .row
dengan .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-*
class dapat digunakan untuk mengontrol lebar talang horizontal, untuk contoh berikut kita menggunakan lebar talang yang lebih kecil, jadi tidak perlu menambahkan .overflow-hidden
kelas pembungkus.
<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>
Talang kolom baris
Kelas selokan juga dapat ditambahkan ke kolom baris . Dalam contoh berikut, kami menggunakan kolom baris responsif dan kelas selokan 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>
Tidak ada selokan
Talang antar kolom di kelas kisi yang telah ditentukan sebelumnya dapat dihapus dengan .g-0
. Ini menghilangkan margin
s negatif dari .row
dan horizontal padding
dari semua kolom turunan langsung.
Butuh desain ujung-ke-ujung? Jatuhkan orang tua .container
atau .container-fluid
.
Dalam praktiknya, inilah tampilannya. Perhatikan bahwa Anda dapat terus menggunakan ini dengan semua kelas kisi yang telah ditentukan sebelumnya (termasuk lebar kolom, tingkat responsif, pengurutan ulang, dan lainnya).
<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 selokan
Kelas dibangun dari $gutters
peta Sass yang diwarisi dari $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,
);