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:
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!