Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Menghapuskan Padding Tambahan dalam Bootstrap 3 Lajur?

Bagaimana untuk Menghapuskan Padding Tambahan dalam Bootstrap 3 Lajur?

Mary-Kate Olsen
Lepaskan: 2024-12-13 07:29:11
asal
481 orang telah melayarinya

How to Eliminate Extra Padding in Bootstrap 3 Columns?

Cara Mengalih Keluar Padding dalam Bootstrap 3

Isu yang dihadapi melibatkan mengalih keluar padding kanan dan kiri lajur col-md-* dalam Bootstrap 3. Kod HTML yang disediakan mengandungi dua lajur bersarang, tetapi hasilnya termasuk jarak tambahan pada sisi lajur.

Output yang Diingini

Matlamatnya adalah untuk menghapuskan ruang tambahan dan meletakkan lajur bersebelahan antara satu sama lain.

Penyelesaian

Masalah timbul daripada menggunakan .col-md-12 sebagai bekas induk untuk lajur. .col-md-12 pada asasnya ialah lajur, bukan baris, dan dengan itu mewarisi jidar dan pelapiknya sendiri. Untuk membetulkannya, adalah penting untuk membalut lajur dalam kelas .row, seperti yang dilihat di bawah:

<div class="container">
    <div class="row">
        <h2>
Salin selepas log masuk

Pilihan Tambahan

Jika hasil yang diinginkan adalah untuk hapuskan semua jidar dan pelapik, tambahkan kelas untuk menulis ganti gaya ini untuk lajur anak:

.nopadding {
padding: 0 !important;
margin: 0 !important;
}
Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk Menghapuskan Padding Tambahan dalam Bootstrap 3 Lajur?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan