Bagaimana untuk Membuat Bootstrap 4 Kad Sama Tinggi dalam Lajur?

Bootstrap 4 - Membuat Kad yang Sama Tinggi dalam Lajur

Masalah:

Apabila berurusan dengan kad Bootstrap, ketinggiannya daripada kad boleh berbeza-beza bergantung pada panjang tajuk kad. Ketidakkonsistenan ini boleh mengakibatkan kad dengan ketinggian berbeza apabila disusun dalam lajur.

Penyelesaian:

Gunakan Flexbox, yang telah digunakan dalam lajur Bootstrap 4, untuk memastikan semua kad mempunyai ketinggian yang sama. Dengan menambahkan kelas h-100 pada setiap kad, yang menunjukkan ketinggian 100%, kad akan mengisi ketinggian yang tersedia secara automatik dalam lajur masing-masing.

Contoh:

<code class="html"><div class="row">
  <div class="col-md-4 col-sm-6 col-12">
    <div class="card h-100">
      ...
    </div>
  </div>
  <!-- Similar cards and columns -->
</div></code>

Nota Tambahan:

• Mengapungkan kad adalah tidak perlu, kerana ia sudah disusun dalam baris dan lajur.
• Elakkan bersarang .col-* kelas dalam .card-deck; sebaliknya, ia hendaklah diletakkan terus dalam .row.

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