Bagaimanakah Saya Boleh Membuat Reka Letak Lajur Batu dengan Grid Flexbox Bootstrap 4?

Reka Letak Lajur Batu dengan Grid Flexbox dalam Bootstrap 4

Walaupun sistem grid flexbox dalam Bootstrap 4 menyediakan serba boleh dalam mencipta reka letak responsif, ia adalah benar bahawa lajur pada mulanya dipaparkan dengan ketinggian yang sama. Walau bagaimanapun, adalah mungkin untuk mencapai reka letak lajur batu menggunakan ciri "Lajur Kad".

Lajur Kad

Seperti yang dijelaskan dalam dokumentasi Bootstrap 4, "Kad boleh disusun dalam lajur seperti Masonry dengan hanya CSS dengan membungkusnya dalam lajur .kad." Ciri ini menggunakan sifat lajur CSS, memastikan penjajaran lebih mudah berbanding flexbox.

Untuk membuat reka letak lajur batu, hanya bungkus elemen .card anda dalam bekas .card-columns. Kad itu kemudiannya akan menyusun sendiri secara dinamik, dengan ketinggiannya ditentukan oleh kandungannya.

Pendekatan ini mengekalkan kesederhanaan dan responsif grid kotak flex Bootstrap, sambil tetap memberikan kesan batu yang diingini.

Contoh

Di bawah ialah contoh kod yang menunjukkan penggunaan lajur kad untuk cipta susun atur batu:

<div class="container">
  <div class="card-columns">
    <div class="card">
      <img class="card-img-top" src="path-to-image" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Card content</p>
      </div>
    </div>
    <div class="card">
      <img class="card-img-top" src="path-to-image" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">Another card title</h5>
        <p class="card-text">More card content</p>
      </div>
    </div>
    <!-- Additional cards can be added as needed -->
  </div>
</div>

Dengan menggunakan lajur kad, anda boleh mencapai susun atur lajur batu yang diingini dengan mudah menggunakan sistem grid flexbox Bootstrap 4.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Reka Letak Lajur Batu dengan Grid Flexbox Bootstrap 4?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!