Bagaimana untuk Menjajarkan Butang di Bahagian Bawah Kad Bootstrap?

Menjajarkan Butang di Bahagian Bawah Kad Bootstrap

Seperti yang anda perhatikan, penjajaran butang dalam kad Bootstrap boleh menjadi masalah apabila kandungan berbeza-beza panjangnya. Untuk menjajarkan butang dengan berkesan di bahagian bawah setiap kad:

1. Melaksanakan Flexbox: Tambahkan kelas d-flex pada elemen .card-body untuk mendayakan reka letak flexbox.
2. Tambah Penjajaran Lajur: Gunakan kelas flex-column pada .card-body untuk menegak selaraskan kandungan dalam kad.
3. Gunakan Auto Margin untuk Menjajarkan Butang: Tambahkan kelas mt-auto pada elemen .btn yang bersarang di dalam .card-body. Ini secara automatik menjajarkan butang di bahagian bawah badan kad, mengisi ruang yang tinggal secara menegak.

Rujuk coretan kod berikut sebagai contoh:

<div class="card">
  <div class="card-body d-flex flex-column">
    <p>Card Content</p>
    <button type="button" class="btn btn-primary mt-auto">Button</button>
  </div>
</div>

Dengan melaksanakan langkah ini, anda boleh memastikan bahawa semua butang dalam kad Bootstrap anda dijajarkan secara konsisten di bahagian bawah masing-masing, tanpa mengira kandungan variasi.

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