Bagaimana untuk Mengeluarkan Bootstrap Gutters daripada Divs Tertentu Tanpa Memecahkan Responsif?

Cara Mengeluarkan Ruang Longkang untuk Div ​​Tertentu Tanpa Menjejaskan Responsif Bootstrap

Dalam susun atur Bootstrap, longkang mewujudkan ruang putih antara lajur, biasanya sekitar 20-30px lebar . Walaupun ini memberikan pemisahan yang menarik secara visual, mungkin terdapat keadaan di mana anda ingin mengalih keluar longkang ini untuk div tertentu tanpa mengganggu tindak balas reka letak.

Penyelesaian Bootstrap 3

Untuk Bootstrap 3, penyingkiran longkang menjadi lebih mudah kerana penggunaan padding dan bukannya margin untuk mencipta longkang. Berikut ialah kod CSS:

.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 dalam Bootstrap 3, cuma tambah kelas "no-gutter" pada baris yang sepadan:

<div class="row no-gutter">
  <div class="col-lg-1"><div>1</div></div>
  <div class="col-lg-1"><div>1</div></div>
  <div class="col-lg-1"><div>1</div></div>
</div>

Bootstrap 4 dan 5 Penyelesaian

Bootstrap 4 memperkenalkan kelas "no-gutters" untuk mengalih keluar talang daripada keseluruhan baris:

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

Bootstrap 5 mengembangkan lagi perkara ini dengan kelas longkang yang membolehkan kawalan halus ke atas kedua-dua mendatar dan menegak jarak. Kelas termasuk:

• g-0 untuk tiada longkang
• g-(1-5) untuk melaraskan jarak
• gy-* untuk melaraskan jarak menegak
• gx-* untuk melaraskan jarak mendatar

Sebagai contoh, untuk mengeluarkan longkang untuk div tertentu sambil mengekalkan tindak balas:

#main_content .col {
  padding: 0 !important;
}

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

Atas ialah kandungan terperinci Bagaimana untuk Mengeluarkan Bootstrap Gutters daripada Divs Tertentu Tanpa Memecahkan Responsif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!