Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Mengeluarkan Padding Berlebihan dalam Bootstrap 3 Lajur?

Bagaimana untuk Mengeluarkan Padding Berlebihan dalam Bootstrap 3 Lajur?

Susan Sarandon
Lepaskan: 2024-12-18 22:58:10
asal
887 orang telah melayarinya

How to Remove Excess Padding in Bootstrap 3 Columns?

Mengalih keluar Padding daripada Bootstrap 3 Lajur

Masalah:

Dalam Bootstrap 3, terdapat padding atau margin yang berlebihan pada sebelah kanan dan kiri kelas col-md-*. Matlamatnya adalah untuk mengalih keluar ruang tambahan ini.

Kod HTML:

<div class="col-md-12">
    <h2>OntoExplorer.<span>
Salin selepas log masuk

Output yang Diingini:

Alih keluar pelapik atau jidar tambahan pada sisi dua lajur tanpa melumpuhkan col-md-* kelas.

Penyelesaian:

Lazimnya, .row digunakan untuk membalut lajur dan bukannya .col-md-12. .Row tidak mempunyai jidar dan padding tambahan yang .col-md-12 ada dan turut menghapuskan ruang yang akan diperkenalkan oleh lajur dengan jidar kiri dan kanan negatif.

Kod HTML yang dikemas kini:

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

CSS tersuai:

Untuk menghapuskan padding atau margin sepenuhnya, kelas CSS tersuai yang dipanggil .nopadding boleh ditambah untuk mengalih keluar sifat ini:

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

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

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