Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mengeluarkan Bootstrap Gutters daripada Divs Tertentu Tanpa Memecahkan Responsif?

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

Patricia Arquette
Patricia Arquetteasal
2024-11-22 16:36:14619semak imbas

How to Remove Bootstrap Gutters from Specific Divs Without Breaking Responsiveness?

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">

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn