Bagaimana untuk Mencapai Susun Atur Batu Menggunakan Grid Flexbox Bootstrap 4?

Cara Membuat Reka Letak Batu dalam Bootstrap 4 dengan Grid Flexbox

Dalam Bootstrap 4, anda boleh mencapai susun atur lajur batu menggunakan flexbox grid dengan memanfaatkan lajur Kad ciri.

Penyelesaian:

Balut elemen kad anda dalam bekas .kad-lajur, seperti yang dilihat di bawah:

<div class="container">
  <div class="card-columns">
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
  </div>
</div>

Penjelasan:

• Kelas .card-columns menggunakan lajur CSS untuk susun kad anda dari atas ke bawah dan kiri ke kanan.
• Kad-kad tersebut dipaparkan dalam sekatan-sekat untuk menghalangnya daripada merentasi lajur.
• Oleh kerana lajur-pecah-dalam: elak belum lagi penyelesaian kalis peluru, anda mungkin masih mengalami lajur yang tidak konsisten ketinggian.

Contoh:

Pertimbangkan HTML berikut:

<div class="container">
  <div class="card-columns">
    <div class="card">
      <img src="card-image-1.jpg" alt="Card image">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">...</p>
      </div>
    </div>
    <div class="card">
      <img src="card-image-2.jpg" alt="Card image">
      <div class="card-body">
        <h5 class="card-title">Another card title</h5>
        <p class="card-text">...</p>
      </div>
    </div>
    <div class="card">
      <img src="card-image-3.jpg" alt="Card image">
      <div class="card-body">
        <h5 class="card-title">Card with long title</h5>
        <p class="card-text">...</p>
      </div>
    </div>
    <div class="card">
      <img src="card-image-4.jpg" alt="Card image">
      <div class="card-body">
        <h5 class="card-title">Another card with even more text</h5>
        <p class="card-text">...</p>
      </div>
    </div>
  </div>
</div>

Ini akan menghasilkan reka letak batu, dengan kad menyusun diri mereka berdasarkan ketinggian kandungan mereka, mencipta grid yang menarik secara visual dan dinamik.

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