Bagaimana untuk Menjajarkan Butang di Bahagian Bawah Kad Bootstrap dengan Panjang Kandungan Berbeza?

Menjajarkan Butang di Bahagian Bawah Kad menggunakan Bootstrap

Satu cabaran biasa yang dihadapi semasa bekerja dengan dek kad Bootstrap ialah menjajarkan butang secara menegak apabila sesetengah kad mempunyai item yang lebih sedikit. Isu ini timbul disebabkan oleh perbezaan dalam panjang senarai antara kad.

Untuk menangani perkara ini, anda boleh menggunakan kelas pengubah suai Bootstrap 4 berikut:

1. d-flex to .card-body: Ini mewujudkan bekas flexbox untuk badan kad.
2. flex-column to .card-body: Tetapkan bekas flexbox ke arah menegak.
3. mt-auto ke .btn bersarang dalam .card-body: Menambah jarak automatik untuk meletakkan butang di bahagian bawah bekas.

Contoh HTML:

<div class="card">
  <div class="card-body d-flex flex-column">
    <ul class="list-group list-group-flush">
      <li class="list-group-item">Item 1</li>
      <li class="list-group-item">Item 2</li>
    </ul>
    <button class="btn btn-primary mt-auto">Button</button>
  </div>
</div>

Demonstrasi Fiddle:

Rujuk biola berikut untuk demonstrasi langsung: https://jsfiddle.net/IGN7K/

Dengan melaksanakan kelas ini, anda boleh memastikan butang dijajarkan secara konsisten di bahagian bawah semua kad, tanpa mengira panjang kandungannya.

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Butang di Bahagian Bawah Kad Bootstrap dengan Panjang Kandungan Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!