Bagaimana untuk Menghapuskan Jarak Longkang Antara Lajur Bootstrap?

Cara Mengeluarkan Jarak Longkang Antara Lajur dalam Bootstrap

Jarak antara lajur dalam Bootstrap boleh mencipta penampilan yang berantakan secara visual apabila tidak diingini. Begini cara untuk menghapuskan ruang longkang ini tanpa menetapkan margin individu:

Bootstrap 5 dan Kemudian

Dalam Bootstrap 5, kelas .no-gutters telah digantikan dengan .g -0. Anda boleh menggunakannya pada elemen .row untuk mengalih keluar semua jarak antara lajur:

<div class="row g-0">
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
</div>

Bootstrap 5 juga menyediakan kelas longkang responsif yang membolehkan anda melaraskan jarak untuk titik putus tertentu. Contohnya, .gx-sm-4 akan mengalih keluar longkang mendatar hanya pada skrin dengan titik putus 'kecil' (cth., telefon pintar).

Bootstrap 4

Dalam Bootstrap 4, anda boleh menggunakan kelas .no-gutters terus pada .row:

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

Bootstrap 3.4.0

Dalam Bootstrap 3.4, kelas .row-no-gutters khusus telah diperkenalkan:

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

Boottrap 3 (<= 3.3.9)

Dalam Bootstrap 3.3.9 dan lebih awal, talang dibuat menggunakan padding. Untuk mengalih keluarnya, anda perlu menggunakan CSS berikut:

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

.no-gutter > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}
Tambah kelas .no-gutter pada elemen .row.
Atas ialah kandungan terperinci Bagaimana untuk Menghapuskan Jarak Longkang Antara Lajur Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!