Bagaimana untuk Memperhalus Jarak dalam Lajur Grid Bootstrap?

Memperhalusi Jarak Grid Bootstrap

Dalam reka letak grid Bootstrap anda, anda menghadapi cabaran dengan jarak antara lajur. Walaupun penyelesaian menggunakan col-md-5 dengan tarik-kiri dan tarik-kanan mungkin mengakibatkan terlalu banyak ruang, pendekatan yang lebih bernuansa tersedia.

Penyelesaian: Sarang Div Dalam Lajur

Sarang div dalam setiap lajur col-md-6 dan gunakan jidar dan pelapik yang diingini pada div bersarang. Pendekatan ini mengekalkan integriti struktur lajur sambil membenarkan jarak tambahan dalam setiap lajur.

Kod:

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

Dengan penyelesaian ini, anda boleh menambah jarak yang diingini dengan mudah pada lajur anda tanpa mengorbankan ketekalan struktur reka letak grid.

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