Bagaimana untuk Menjajarkan Butang Bootstrap di Bahagian Bawah Kad?

Menjajarkan Butang Bootstrap di Bahagian Bawah Kad

Pernyataan Masalah

Apabila bekerja dengan kelas kad dan dek kad Bootstrap, salah jajaran boleh berlaku apabila seseorang kandungan kad berbeza dari segi saiz. Isu ini amat ketara apabila cuba menjajarkan butang secara menegak di bahagian bawah setiap kad.

Penyelesaian

Bootstrap 4 menyediakan kelas pengubah suai yang menawarkan penyelesaian yang elegan untuk cabaran penjajaran ini:

1. Tambah d-flex pada .card-body
2. Tambah lajur-flex pada .card-body
3. Tambah mt-auto pada elemen .btn yang bersarang dalam . card-body

Pengubahsuaian Kod

<div class="card-deck">
  <div class="card">
    <div class="card-body d-flex flex-column">
      <p class="card-text">Card 1 content</p>
      <button type="button" class="btn btn-primary mt-auto">Button 1</button>
    </div>
  </div>
  <div class="card">
    <div class="card-body d-flex flex-column">
      <p class="card-text">Card 2 content</p>
      <button type="button" class="btn btn-primary mt-auto">Button 2</button>
      <button type="button" class="btn btn-primary mt-auto">Button 3</button>
    </div>
  </div>
</div>

Kesimpulan

Menggunakan kelas pengubah suai ini secara automatik menjajarkan butang di bahagian bawah kad, tanpa mengira variasi kandungan. Ini memastikan persembahan yang konsisten dan menarik secara visual.

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