Bagaimana untuk Mengawal Margin dan Padding Antara Lajur dalam Bootstrap?

Mengurus Margin dan Padding dalam Lajur dengan Bootstrap

Apabila bekerja dengan reka letak grid Bootstrap, adalah wajar untuk melaraskan ruang antara lajur. Ini boleh dicapai dengan memasukkan jidar dan pelapik tambahan.

Satu pendekatan biasa ialah mengubah suai kelas lajur, menggunakan pilihan seperti col-md-5 dengan tarik-kiri dan tarik-kanan. Walau bagaimanapun, teknik ini boleh mengakibatkan jarak yang berlebihan.

Penyelesaian alternatif ialah mencipta elemen div bersarang dalam setiap lajur col-md-6. Tulang belakang lajur kekal utuh, manakala div bersarang boleh diberikan margin dan padding yang dikehendaki.

Contoh:

HTML:

<code class="html"><div class="row">
    <div class="text-center col-md-6">
        <div class="classWithPad">Widget 1</div>
    </div>
    <div class="text-center col-md-6">
        <div class="classWithPad">Widget 2</div>
    </div>
</div></code>

CSS:

<code class="css">.classWithPad {
  margin: 10px;
  padding: 10px;
}</code>

Pendekatan ini membolehkan kawalan tepat ke atas jarak antara lajur, tanpa menjejaskan reka letak grid.

Atas ialah kandungan terperinci Bagaimana untuk Mengawal Margin dan Padding Antara Lajur dalam Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!