Bagaimana untuk Mencipta Kad Ketinggian Sama Dalam Dalam Bootstrap 4 Lajur?

Kad Bootstrap 4 Sama Ketinggian Dalam Lajur

Isu

Banyak pembangun yang menggunakan Bootstrap 4 menghadapi isu biasa: kad dalam lajur sering berbeza ketinggian , terutamanya disebabkan oleh perbezaan kandungan atau saiz tajuk. Ini boleh mencipta reka letak yang tidak rata dan tidak menarik secara visual.

Penyelesaian

Untuk mencapai kad ketinggian yang sama dalam lajur Bootstrap 4, manfaatkan kelas h-100 untuk menetapkan ketinggian daripada kad kepada 100% daripada lajur yang mengandungi. Ini memastikan bahawa kad memenuhi ketinggian penuh ruang yang tersedia.

Pelaksanaan

Penanda HTML:

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

Nota:

• Kelas .col-* hendaklah digunakan terus pada div .card, bukan pada elemen perantaraan seperti . dek kad.
• Menggunakan float pada kad adalah tidak perlu.
• Kelas h-100 boleh digunakan pada semua kad dalam lajur atau secara terpilih kepada kad tertentu untuk pelarasan ketinggian yang disasarkan.

Kod Contoh (Codeply):

https://codeply.com/go/ hKhPuxoovH

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