Bagaimana untuk Mencapai Susun Atur Batu Menggunakan Grid Flexbox Bootstrap 4?-tutorial css-php.cn

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

Linda Hamilton

Lepaskan： 2024-12-19 13:13:09

asal

547 orang telah melayarinya

How to Achieve a Masonry Layout Using Bootstrap 4's Flexbox Grid?

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!