Bagaimana untuk Membuat Kad Bootstrap 4 Ketinggian yang Sama dalam Lajur?

Bootstrap 4: Kad yang Sama Tinggi dalam Lajur

Masalah:

Menggunakan Bootstrap 4, kad dalam lajur berbeza-beza dalam ketinggian berdasarkan panjang teks tajuk. Bagaimanakah anda boleh mencapai kad berketinggian sama, walaupun apabila ketinggian kandungannya berbeza?

Jawapan:

Bertentangan dengan kebimbangan, lajur Bootstrap 4 sudah menggunakan flexbox, yang memastikan mereka mempunyai ketinggian yang sama. Untuk menjadikan kad menduduki keseluruhan ketinggian lajur masing-masing, cuma tambah kelas h-100 pada kad, seperti yang dilihat dalam coretan kod berikut:

<code class="html"><div class="col-md-4 col-sm-6 col-12">
  <div class="card h-100">
    ...
  </div>
</div></code>

Pertimbangan Tambahan:

• Elakkan mengapungkan kad, kerana ia tidak perlu.
• Alih keluar kelas .card-deck daripada .row; .col-* mestilah anak langsung .row.

Demonstrasi:

Lawati https://codeply.com/go/hKhPuxoovH untuk siaran langsung demonstrasi penyelesaian.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Kad Bootstrap 4 Ketinggian yang Sama dalam Lajur?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!