Bagaimanakah Saya Boleh Menambah Jarak Antara Lajur dalam Bootstrap?

Menambah Jarak Antara Lajur dalam Bootstrap

Apabila bekerja dengan sistem grid Bootstrap, anda mungkin menghadapi keperluan untuk menambah ruang antara lajur. Secara lalai, lajur diletakkan betul-betul bersebelahan antara satu sama lain. Walau bagaimanapun, anda boleh mencapai jarak antara lajur dengan mudah menggunakan penyelesaian Bootstrap yang mudah.

Lajur Bersarang

Untuk mencipta jarak antara lajur, anda boleh membalut setiap lajur dalam lajur bersarang . Sebagai contoh, pertimbangkan kod berikut:

<div class="row">
  <div class="col-md-6">
    <div class="col-md-12">
      Column 1 content
    </div>
  </div>
  <div class="col-md-6">
    <div class="col-md-12">
      Column 2 content
    </div>
  </div>
</div>

Mengubah Saiz Lajur Dalam

Dengan membalut lajur dengan cara ini, Bootstrap secara automatik memperuntukkan lebih kurang 10px padding kepada kiri dan kanan lajur dalam. Ini menghasilkan ruang yang boleh dilihat antara lajur luar.

Menyesuaikan Ruang

Untuk melaraskan jumlah ruang antara lajur, anda boleh menentukan lebar bahagian dalam lajur. Sebagai contoh, jika anda mahukan ruang 100px, anda akan menukar lajur dalam kepada:

<div class="col-md-12">

Kesimpulan

Menggunakan teknik lajur bersarang, mudah untuk ditambah jarak antara lajur dalam Bootstrap. Ini amat berguna apabila anda ingin menekankan elemen tertentu atau membuat reka letak yang lebih menarik secara visual.

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