Bagaimanakah saya boleh mengeluarkan talang dalam Bootstrap?

Mengeluarkan Parit dalam Bootstrap: Panduan Komprehensif

Pengenalan

Apabila bekerja dengan Bootstrap, longkang 30px antara lajur kadangkala boleh menjadi penghalang kepada reka bentuk anda. Dalam artikel ini, kami akan meneroka pelbagai kaedah untuk membuang longkang ini tanpa perlu menetapkan margin negatif.

Bootstrap 5

Versi terbaharu Bootstrap 5 memperkenalkan kelas khusus , .no-gutters, yang boleh ditambahkan pada elemen .row untuk mengalih keluar semua mendatar dan menegak talang.

<div class="row no-gutters">
  <div class="col">x</div>
  <div class="col">x</div>
  <div class="col">x</div>
</div>

Selain itu, Bootstrap 5 menyediakan rangkaian kelas longkang baharu untuk memperhalusi jarak antara lajur secara responsif.

Bootstrap 4

Untuk Bootstrap 4, kelas .no-gutters juga boleh digunakan pada elemen .row untuk mengalih keluar talang.

<div class="row no-gutters">
  <div class="col">x</div>
  <div class="col">x</div>
  <div class="col">x</div>
</div>

Bootstrap 3.4.0

Bootstrap 3.4.0 memperkenalkan kelas .row-no-gutters yang direka khusus untuk mengalihkan longkang.

<div class="row row-no-gutters">
  <div class="col">x</div>
  <div class="col">x</div>
  <div class="col">x</div>
</div>

Bootstrap 3 , <= 3.3.9

Untuk Bootstrap 3 versi lebih awal daripada 3.4.0, talang dibuat menggunakan padding. Untuk mengalih keluarnya, anda boleh menentukan kelas CSS tersuai:

.no-gutter {
  margin-right: 0;
  margin-left: 0;
}

.no-gutter > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}
Kemudian, tambahkan kelas .no-gutter pada elemen .row.
Atas ialah kandungan terperinci Bagaimanakah saya boleh mengeluarkan talang dalam Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!