longkang
Longkang ialah pelapik di antara lajur anda, digunakan untuk mengosongkan dan menjajarkan kandungan secara responsif dalam sistem grid Bootstrap.
Bagaimana mereka bekerja
-
Longkang ialah jurang antara kandungan lajur, dicipta oleh mendatar
padding
. Kami menetapkanpadding-right
danpadding-left
pada setiap lajur, dan menggunakan negatifmargin
untuk mengimbanginya pada permulaan dan akhir setiap baris untuk menjajarkan kandungan. -
Longkang bermula pada
1.5rem
(24px
) lebar. Ini membolehkan kami memadankan grid kami dengan skala pelapik dan pengatur jarak jidar . -
Parit boleh dilaraskan secara responsif. Gunakan kelas longkang khusus titik putus untuk mengubah suai longkang mendatar, longkang menegak dan semua longkang.
Parit mendatar
.gx-*
kelas boleh digunakan untuk mengawal lebar longkang mendatar. Induk .container
atau .container-fluid
induk mungkin perlu dilaraskan jika longkang yang lebih besar digunakan juga untuk mengelakkan limpahan yang tidak diingini, menggunakan utiliti pelapik yang sepadan. Sebagai contoh, 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>
Penyelesaian alternatif ialah menambah pembalut di sekeliling .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>
Longkang menegak
.gy-*
kelas boleh digunakan untuk mengawal lebar longkang menegak. Seperti longkang mendatar, longkang menegak boleh menyebabkan sedikit limpahan di bawah .row
pada penghujung halaman. Jika ini berlaku, anda menambah pembalut .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>
Longkang mendatar & menegak
.g-*
kelas boleh digunakan untuk mengawal lebar longkang mendatar, untuk contoh berikut kita menggunakan lebar longkang yang lebih kecil, jadi tidak perlu menambah .overflow-hidden
kelas pembalut.
<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>
Lajur baris longkang
Kelas longkang juga boleh ditambah pada lajur baris . Dalam contoh berikut, kami menggunakan lajur baris responsif dan kelas longkang 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>
Tiada longkang
Parit antara lajur dalam kelas grid kami yang telah ditetapkan boleh dialihkan dengan .g-0
. Ini mengalih keluar s negatif margin
daripada .row
dan mendatar padding
daripada semua lajur kanak-kanak segera.
Perlukan reka bentuk tepi ke tepi? Gugurkan ibu bapa .container
atau .container-fluid
.
Dalam amalan, inilah rupanya. Harap maklum bahawa anda boleh terus menggunakan ini dengan semua kelas grid pratakrif lain (termasuk lebar lajur, peringkat responsif, susunan semula dan banyak lagi).
<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>
Tukar longkang
Kelas dibina daripada $gutters
peta Sass yang diwarisi daripada $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,
);