Bagaimana untuk Mengeluarkan Ruang Longkang dalam Sistem Grid Bootstrap?

Mengalih Keluar Ruang Longkang untuk Div ​​Tertentu

Pengenalan

Sistem grid Bootstrap menggunakan longkang lalai 30px antara lajur, menyumbang kepada susun atur yang bersih dan konsisten. Walau bagaimanapun, adalah wajar untuk mengalih keluar ruang longkang ini untuk elemen tertentu dalam satu baris. Artikel ini meneroka teknik untuk mencapai matlamat ini tanpa menjejaskan tindak balas Bootstrap atau memperkenalkan ruang kosong yang tidak sedap dipandang.

Bootstrap 3.x

Untuk Bootstrap 3.x, penyelesaiannya telah menjadi lebih berterus terang. Padding kini digunakan untuk membuat longkang, menjadikannya lebih mudah untuk dikeluarkan. Laksanakan CSS berikut:

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

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}

Untuk mengalih keluar longkang bagi div tertentu, hanya tetapkan kelas "no-gutter" pada baris yang sepadan.

Bootstrap 4.x

Bootstrap 4.x termasuk kelas utiliti terbina dalam, "no-gutters," yang mencapai kesan yang diingini.

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

Bootstrap 5.x

Lelaran terbaharu Bootstrap menawarkan kawalan yang lebih berbutir ke atas jarak longkang dengan pengenalan kelas longkang. Gunakan "g-0" untuk membuang longkang sepenuhnya atau laraskannya menggunakan kelas "g-1-5". Kelas ini juga boleh digunakan secara responsif dengan titik putus, seperti "gx-sm-4" untuk melaraskan longkang mendatar untuk skrin yang lebih kecil daripada 768px.

Atas ialah kandungan terperinci Bagaimana untuk Mengeluarkan Ruang Longkang dalam Sistem Grid Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!