Talang

Talang adalah bantalan di antara kolom Anda, digunakan untuk memberi ruang secara responsif dan menyelaraskan konten dalam sistem kisi Bootstrap.

Di halaman ini

Bagaimana mereka bekerja?

Talang adalah celah antara konten kolom, dibuat oleh horizontal padding. Kami mengatur padding-rightdan padding-leftpada setiap kolom, dan menggunakan negatif marginuntuk 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 .containeratau .container-fluidmungkin 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:

Padding kolom khusus

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 adalah menambahkan pembungkus di sekitar .rowdengan .overflow-hiddenkelas:

Padding kolom khusus

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 vertikal

.gy-*kelas dapat digunakan untuk mengontrol lebar talang vertikal dalam satu baris saat kolom membungkus ke baris baru. Seperti talang horizontal, talang vertikal dapat menyebabkan limpahan di bawah .rowdi akhir halaman. Jika ini terjadi, Anda menambahkan pembungkus .rowdengan .overflow-hiddenkelas:

Padding kolom khusus

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 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-hiddenkelas pembungkus.

Padding kolom khusus

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>

Talang kolom baris

Kelas selokan juga dapat ditambahkan ke kolom baris . Dalam contoh berikut, kami menggunakan kolom baris responsif dan kelas selokan 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>

Tidak ada selokan

Talang antar kolom di kelas kisi yang telah ditentukan sebelumnya dapat dihapus dengan .g-0. Ini menghilangkan margins negatif dari .rowdan horizontal paddingdari semua kolom turunan langsung.

Butuh desain ujung-ke-ujung? Jatuhkan induk .containeratau .container-fluiddan tambahkan .mx-0ke .rowuntuk mencegah luapan.

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).

.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 selokan

Kelas dibangun dari $gutterspeta Sass yang diwarisi dari $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,
);