Bagaimanakah Saya Boleh Menambah Ruang Tambahan Antara Lajur Grid Bootstrap?

Mencipta Ruang Tambahan Antara Lajur Grid dengan Bootstrap

Menambah margin tambahan dan ruang padding antara lajur dalam susun atur grid Bootstrap boleh meningkatkan daya tarikan visual laman web anda. Semasa menggunakan tarik-kiri dan tarik-kanan dengan kelas col-md-5 yang diubah suai mungkin menjadi pilihan, ia boleh mengakibatkan jurang yang berlebihan.

Penyelesaian yang lebih elegan ialah membuat div bersarang dalam setiap lajur dan gunakan padding yang dikehendaki kepadanya. Pendekatan ini mengekalkan struktur lajur sambil membenarkan ruang tambahan.

Pelaksanaan Kod

Pertimbangkan kod HTML yang dipinda berikut:

<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>

Gaya CSS

Untuk menggunakan margin dan padding yang diingini, tambahkan CSS berikut:

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

Dengan melaksanakan kaedah ini, anda boleh menambah ruang tambahan dengan berkesan antara lajur grid anda sambil mengekalkan integriti reka letak anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menambah Ruang Tambahan Antara Lajur Grid Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!