Bagaimanakah Saya Boleh Mengalih Keluar atau Melaraskan Ruang Longkang dalam Bootstrap untuk Div ​​Tertentu?

Mengalihkan Ruang Longkang untuk Div ​​Tertentu

Sistem grid lalai Bootstrap termasuk ruang longkang 30px antara lajur, menghasilkan baris dengan 360px ruang yang tidak digunakan jika longkang dialih keluar sepenuhnya. Untuk menangani perkara ini, sambil mengekalkan tindak balas Bootstrap, ikut langkah berikut:

Bootstrap 5 (Sejak Kemas Kini 2021)

Bootstrap 5 memperkenalkan kelas longkang khusus:

• g-0: Tidak longkang
• g-(1-5): Laraskan longkang mendatar dan menegak menggunakan unit jarak
• gy-*: Laraskan longkang menegak
• gx-*: Laraskan mendatar talang

Contoh:

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

Bootstrap 4 (Tiada CSS Tambahan Diperlukan)

Bootstrap 4 menyediakan kelas tanpa talang untuk baris:

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

Boottrap 3 (Jawapan Asal)

Bootstrap 3 memperkenalkan penggunaan padding dan bukannya margin untuk longkang. Untuk mencapai kesan ini:

1. Buat kelas CSS baharu:

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

2. Alih keluar padding daripada semua lajur kecuali yang pertama dan terakhir:

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
    padding-right: 0;
    padding-left: 0;
}

3. Gunakan kelas tanpa longkang kepada yang dikehendaki baris:

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

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengalih Keluar atau Melaraskan Ruang Longkang dalam Bootstrap untuk Div ​​Tertentu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!