Bagaimana untuk Menambah Jarak Antara Lajur dalam Reka Letak Grid Bootstrap?

Jarakkan Lajur dalam Reka Letak Grid Bootstrap

Menambah jidar atau pelapik untuk mencipta ruang antara lajur dalam Bootstrap boleh menjadi rumit. Untuk mencapai ini tanpa menjejaskan penjajaran lajur, ikuti langkah berikut:

Buat Div Dalaman Dalam Lajur

Buat div dalam elemen col-md-6 dan gunakan margin dan padding yang dikehendaki kepadanya. Div ini akan bertindak sebagai tulang belakang lajur sambil menyediakan jarak yang diperlukan.

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

Tambah Penggayaan Tersuai

Dalam CSS anda, gunakan margin dan padding yang diingini ke div dalam.

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

Pendekatan ini membolehkan anda melaraskan jarak antara lajur dengan mudah tanpa menjejaskan integriti reka letak grid Bootstrap.

Atas ialah kandungan terperinci Bagaimana untuk Menambah Jarak Antara Lajur dalam Reka Letak Grid Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!