Bagaimana untuk Mengeluarkan Parit Lajur Bootstrap Tanpa Margin Negatif?

Menghapuskan Longkang Lajur dalam Bootstrap Tanpa Menggunakan Margin Negatif

Masalah:

Cara mengalih keluar jarak lalai 30px antara lajur dalam Bootstrap tanpa perlu menetapkan negatif margin?

Penyelesaian:

Bergantung pada versi Bootstrap anda, berikut ialah pendekatan yang disyorkan:

Bootstrap 5:

• Pendekatan baharu: Gunakan kelas .g-0 untuk menghapuskan longkang dalam .row.
• Talang baris: Tingkatkan tindak balas dengan menggunakan kelas longkang yang direka bentuk untuk titik putus tertentu (cth., .gx-sm-4 untuk longkang mendatar pada skrin kecil).

Boottrap 4:

• Diringkaskan: Laksanakan kelas .no-gutters terus pada .row.
• Contoh kod:

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

Boottrap 3.4.0 :

• Berasaskan kelas: Gunakan kelas .row-no-gutters yang baru diperkenalkan.

Bootstrap 3 , <= 3.3.9:

• Pelarasan padding: Ubah suai padding dalam lajur dan tambahkan kelas .no-gutter tersuai pada .row.
• Kod CSS:

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

.no-gutter > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}
Atas ialah kandungan terperinci Bagaimana untuk Mengeluarkan Parit Lajur Bootstrap Tanpa Margin Negatif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!