Bagaimana untuk Mencapai Susun Atur Batu dengan Lajur Kad Bootstrap 4?

Cara Membuat Reka Letak Batu Menggunakan Flexbox dalam Bootstrap 4

Sistem grid flexbox Bootstrap 4 membolehkan susun atur lajur yang fleksibel dan responsif. Untuk membuat susun atur lajur batu yang mana item mempunyai ketinggian yang berbeza-beza dalam satu baris, anda boleh menggunakan ciri lajur kad Bootstrap.

Menggunakan Lajur Kad

Seperti yang dinyatakan dalam Bootstrap dokumentasi:

"Kad boleh disusun ke dalam lajur seperti Masonry dengan hanya CSS dengan membungkusnya dalam .card-columns Kad dibina dengan sifat lajur CSS dan bukannya flexbox untuk penjajaran lebih mudah Kad disusun dari atas ke bawah dan kiri ke kanan."

Untuk membuat reka letak batu, hanya bungkus anda. .elemen kad dalam bekas .kad-lajur.

Contoh Kod

Berikut ialah contoh reka letak batu menggunakan ciri lajur kad Bootstrap 4:

<div class="container">
  <div class="card-columns">
    <div class="card">
      <img class="card-img-top" src="..." alt="Image">
      <div class="card-body">...</div>
    </div>
    <div class="card">
      <blockquote class="blockquote mb-0 card-body">...</blockquote
    </div>
    <div class="card">
      <img class="card-img-top" src="..." alt="Image">
      <div class="card-body">...</div>
    </div>
    <div class="card bg-primary text-white text-center p-3">
      <blockquote class="blockquote mb-0">...</blockquote>
    </div>
    <div class="card text-center">
      <div class="card-body">...</div>
    </div>
    <div class="card">
      <img class="card-img" src="..." alt="Image">
    </div>
    <div class="card p-3 text-right">
      <blockquote class="blockquote mb-0">...</blockquote
    </div>
    <div class="card">
      <div class="card-body">...</div>
    </div>
  </div>
</div>

Dengan menggabungkan ciri lajur kad ini, anda boleh membuat reka letak batu dengan mudah tanpa memerlukan susunan CSS atau flexbox tersuai.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Susun Atur Batu dengan Lajur Kad Bootstrap 4?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!