Bagaimana untuk Mengeluarkan Ruang Longkang daripada Div Khusus dalam Bootstrap?

Mengalih keluar Ruang Longkang untuk Div ​​Tertentu

Sistem grid Bootstrap lalai menggunakan reka letak 12 lajur dengan longkang 30px yang memisahkan lajur. Walaupun Bootstrap menyediakan kelas tanpa longkang untuk mengalih keluar longkang daripada keseluruhan baris, ini boleh membawa kepada ruang tambahan di penghujung baris.

Untuk situasi di mana anda perlu mengalih keluar ruang longkang untuk div tertentu sahaja, pertimbangkan pilihan berikut:

Bootstrap 5

• Gunakan kelas longkang g-* baharu untuk melaraskan longkang secara responsif mengikut titik putus tertentu.
• g-0 menghapuskan semua longkang.
• g -(1-5) melaraskan longkang mendatar dan menegak menggunakan jarak unit.
• gy-* melaraskan longkang menegak sahaja.
• gx-* melaraskan longkang mendatar sahaja.

Bootstrap 4

• Sertakan kelas tanpa talang ke baris, yang mengeluarkan longkang daripada semua lajur:

  <div>

• Gunakan utiliti jarak untuk mengawal jidar lajur dan padding individu:

  <div>

Boottrap 3

• Gunakan kelas row.no-gutter, yang melaraskan kedua-dua jidar dan padding untuk membuang longkang:

  .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;
  }

Contoh (Bootstrap 3):

<div>

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