Bagaimana untuk Mencapai Ketinggian Kad Yang Sama dalam Lajur Kad Bootstrap?

Lajur Kad Bootstrap: Mencapai Ketinggian Kad Yang Sama

Dalam Bootstrap 4, kelas lajur kad membolehkan penciptaan susun atur yang menarik dari segi estetika di mana berbilang kad disusun dalam lajur dengan ketinggian berubah-ubah. Walau bagaimanapun, ini boleh menyebabkan ketinggian kad tidak sekata, yang mungkin tidak diingini.

Untuk mencapai ketinggian kad seragam, Bootstrap menyediakan dua penyelesaian:

Pilihan 1: Menetapkan Ketinggian pada baris atau Elemen lajur

Anda boleh menjajarkan ketinggian kad dengan menetapkan kelas utiliti align-item-stretch pada salah satu elemen baris atau lajur di mana kad terkandung. Ini akan meregangkan kad secara menegak untuk mengisi ruang yang tersedia.

<div class="container">
  <div class="row">
    <div class="col-lg-4 d-flex align-items-stretch">
      <!--CARD HERE-->
    </div>
    <div class="col-lg-4 d-flex align-items-stretch">
      <!--CARD HERE-->
    </div>
    <div class="col-lg-4 d-flex align-items-stretch">
      <!--CARD HERE-->
    </div>
  </div>
</div>

Pilihan 2: Penyelesaian Flexbox untuk Bootstrap 5

Untuk Bootstrap 5, kod CSS berikut boleh digunakan untuk mencapai ketinggian kad yang sama dalam lajur kad menggunakan Flexbox hartanah:

.card-columns {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}

Contoh dalam CodePen

Untuk demonstrasi langsung penyelesaian ini dalam CodePen, sila lawati pautan berikut:
https://codepen .io/Kerrys7777/pen/QWgwEeG

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