Bagaimanakah Saya Boleh Membuat Susun Atur Batu dengan Grid Flexbox dan Lajur Kad Bootstrap 4?

Melaksanakan Reka Letak Masonry menggunakan Bootstrap 4 Flexbox Grid

Mencipta reka letak batu dengan lajur yang sama ketinggian boleh mencabar dengan sistem grid flexbox Bootstrap 4. Walau bagaimanapun, anda boleh mencapainya dengan berkesan dengan beberapa kelas Bootstrap terbina dalam.

Ciri Lajur Kad

Bootstrap 4 menawarkan ciri lajur Kad, yang menggunakan sifat lajur CSS untuk menjajarkan kad seperti grid batu . Kaedah ini memudahkan proses penjajaran dan menghalang kad daripada merentas lajur.

<div class="container">
  <div class="card-columns">
    ...Your cards HTML code...
  </div>
</div>

Menetapkan Kad kepada Sekatan Sebaris

Untuk mengelakkan kad daripada merentas lajur, adalah disyorkan untuk menetapkannya supaya dipaparkan: blok sebaris dalam bekas lajur kad. Ini kerana lalai column-break-inside: avoid style tidak boleh dipercayai sepenuhnya.

.card {
  display: inline-block;
}

Contoh Code

Berikut ialah contoh coretan kod yang menunjukkan reka letak batu dengan kad Bootstrap 4:

<div class="container">
  <div class="card-columns">
    <div class="card">
      <img src="card-image-1.jpg" class="card-img-top" alt="Card image">
      <div class="card-body">

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