Bagaimana untuk Mencipta Dek Kad Responsif dalam Bootstrap 4?

Dek Kad Bootstrap 4 dengan Bilangan Lajur Berdasarkan Port Pandangan

Mencipta dek kad dengan bilangan lajur yang responsif dalam Bootstrap 4 memerlukan sedikit pemahaman tentang sistem grid dan keupayaan flexbox baharu yang diperkenalkan dalam Bootstrap 4.

Menggunakan Lajur Grid

Daripada bergantung pada kelas dek kad, yang menggunakan sifat paparan sel jadual, kita boleh menggunakan kelas kol-* grid untuk menentukan lebar lajur yang dikehendaki. Ini memberi kami lebih kawalan ke atas reka letak dan membolehkan kami membuat reka bentuk responsif.

Mendayakan Flexbox

Dalam Bootstrap 4, flexbox didayakan secara lalai. Walau bagaimanapun, jika anda menggunakan versi lama atau ingin mendayakan flexbox secara manual, tambahkan peraturan CSS berikut:

<code class="css">.row > div[class*='col-'] {
  display: flex;
}</code>

Menetapkan Ketinggian Sama

Untuk membuat kad ketinggian yang sama, kita boleh memanfaatkan keupayaan flexbox untuk melaraskan ketinggian anak-anaknya secara automatik agar sepadan dengan anak yang paling tinggi. Hanya tambahkan kelas h-100 pada setiap kad, yang akan menjadikannya 100% ketinggian dan regangan untuk dipadankan dengan kad tertinggi dalam lajur.

<code class="html"><div class="row">
  <div class="col-6 h-100">
    <div class="card">...</div>
  </div>
  <div class="col-4 h-100">
    <div class="card">...</div>
  </div>
  <div class="col-2 h-100">
    <div class="card">...</div>
  </div>
</div></code>

Dengan menggabungkan teknik ini, anda boleh mencipta kad Bootstrap 4 -dek yang menyesuaikan diri dengan saiz port pandangan yang berbeza, memastikan kad kekal sama tinggi dan bersaiz sesuai berdasarkan ruang yang tersedia.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Dek Kad Responsif dalam Bootstrap 4?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!