Bagaimana untuk Menjajarkan Butang di Bahagian Bawah Kad Bootstrap dengan Panjang Kandungan Berbeza?

DDD
Lepaskan: 2024-11-11 05:41:03
asal
205 orang telah melayarinya

How to Align Buttons at the Bottom of Bootstrap Cards with Different Content Lengths?

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:

  1. d-flex to .card-body: Ini mewujudkan bekas flexbox untuk badan kad.
  2. flex-column to .card-body: Tetapkan bekas flexbox ke arah menegak.
  3. mt-auto ke .btn bersarang dalam .card-body: Menambah jarak automatik untuk meletakkan butang di bahagian bawah bekas.

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan