Bolehkah Grid Flexbox Bootstrap 4 Mencipta Reka Letak Batu?

Menggunakan Bootstrap 4 Flexbox Grid untuk Layout Masonry

Bootstrap 4 menggunakan sistem grid flexbox untuk susun atur lajur. Walau bagaimanapun, sesetengah pengguna mungkin tertanya-tanya sama ada boleh membuat reka letak batu, di mana lajur mempunyai ketinggian yang berbeza-beza, menggunakan grid flexbox ini.

Jawapannya ya, ia boleh dilaksanakan dengan kelas Bootstrap 4 standard. Dokumentasi termasuk bahagian khusus pada lajur Kad yang membolehkan kefungsian ini.

Ciri Lajur Kad

Seperti yang dinyatakan dalam dokumentasi Bootstrap 4:

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

Pelaksanaan

Untuk menggunakan ciri lajur Kad, hanya bungkus .kad anda menjadi .kad-lajur bekas.

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

Pertimbangan

Perlu diingat bahawa menggunakan lajur Kad mungkin tidak sesuai dalam semua situasi. Untuk mengelakkan kad daripada merentas lajur, adalah disyorkan untuk menetapkan sifat paparannya kepada sekatan sebaris. Walau bagaimanapun, column-break-inside: avoid CSS property belum lagi merupakan penyelesaian yang boleh dipercayai sepenuhnya.

Atas ialah kandungan terperinci Bolehkah Grid Flexbox Bootstrap 4 Mencipta Reka Letak Batu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!