Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mengeluarkan Ruang Longkang dalam Sistem Grid Bootstrap?

Bagaimana untuk Mengeluarkan Ruang Longkang dalam Sistem Grid Bootstrap?

Barbara Streisand
Barbara Streisandasal
2024-11-22 12:27:15860semak imbas

How to Remove Gutter Space in Bootstrap Grid Systems?

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!

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