Bagaimana untuk Menjajarkan Butang Secara Menegak di Bahagian Bawah Kad Bootstrap dengan Panjang Senarai Berbeza?

Penjajaran Menegak Butang dalam Kad Bootstrap dengan Pelbagai Panjang Senarai

Dalam projek Bootstrap, anda mungkin menghadapi situasi di mana anda mempunyai siri kad dengan panjang senarai yang berbeza-beza. Jika anda mahu semua butang dalam kad ini dijajarkan secara menegak di bahagian bawah, anda mungkin menghadapi kesukaran dengan penggayaan lalai.

Untuk mencapai penjajaran ini, pertimbangkan untuk menggunakan kelas pengubah suai Bootstrap 4 berikut:

• d-flex kepada .card-body
• flex-column to .card-body
• mt-auto to .btn bersarang dalam .card-body

Kelas ini akan mengkonfigurasi .card-body untuk menggunakan reka letak flexbox dan menetapkan butang (.btn) untuk secara automatik menduduki ruang yang tinggal dalam arah menegak.

Untuk demonstrasi praktikal, rujuk jsfiddle yang dikemas kini ini:

[pautan jsfiddle]

Pertimbangan Tambahan:

• Anda boleh menyesuaikan jarak dengan mengubah suai jidar unsur .btn menggunakan kelas seperti mr-auto atau ml-auto.
• Pertimbangkan untuk menggunakan utiliti fleksibel responsif (cth., d-block, d-md-none) apabila menyasarkan saiz skrin tertentu.

Dengan melaksanakan teknik ini, anda boleh memastikan bahawa butang dalam kad Bootstrap anda secara menegak sejajar dan responsif kepada panjang kandungan yang berbeza.

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