Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Menjajarkan Butang Secara Menegak di Bahagian Bawah Kad Bootstrap?

Bagaimanakah Saya Boleh Menjajarkan Butang Secara Menegak di Bahagian Bawah Kad Bootstrap?

Patricia Arquette
Patricia Arquetteasal
2024-11-08 22:27:02776semak imbas

How Can I Vertically Align Buttons at the Bottom of Bootstrap Cards?

Bootstrap: Jajarkan Menegak Butang di Bahagian Bawah Kad

Dalam menggunakan kelas kad dan dek kad Bootstrap, pembangun sering menghadapi masalah penjajaran apabila satu kad mempunyai lebih sedikit item senarai daripada yang lain. Ini boleh menyebabkan butang tidak sejajar di bahagian bawah kad.

Untuk menyelesaikan isu ini, pertimbangkan untuk menggunakan kelas pengubah suai Bootstrap 4 berikut:

  • d-flex to .card-body: Mendayakan kefungsian flexbox.
  • flex-column to .card-body: Susun item flexbox dalam lajur menegak.
  • mt-auto ke .btn bersarang dalam .card-body: Menjajarkan butang secara automatik di bahagian bawah lajur dengan menetapkan sifat atas margin kepada "auto."

Dengan menggunakan ini kelas, butang dalam setiap kad akan melaraskan kedudukan menegaknya secara automatik untuk mengekalkan penjajaran, tanpa mengira bilangan item senarai.

Untuk senarai lengkap kelas pengubahsuaian flexbox yang tersedia dalam Bootstrap 4, rujuk dokumentasi rasmi.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjajarkan Butang Secara Menegak di Bahagian Bawah Kad Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn