Bagaimana untuk Mencipta Dek Kad Responsif dengan Lebar Kad Boleh Ubah dalam Bootstrap 4?

Dek Kad Bootstrap 4 dengan Lebar Kad Boleh Ubah

Masalah:

Kad Bootstrap 4 -ciri dek menjajarkan kad sebelah-menyebelah, tetapi semua kad mempunyai lebar yang sama tanpa mengira saiz port pandang. Ini boleh menyebabkan pembentangan suboptimum pada skrin yang lebih sempit.

Penyelesaian:

Untuk mencipta dek kad responsif dengan lebar kad yang berbeza-beza berdasarkan saiz port pandangan, anda boleh melaksanakan langkah berikut:

1. Hapuskan Penggunaan Dek Kad:

Kelas dek kad menggunakan reka letak sel jadual, yang mengehadkan fleksibiliti. Sebaliknya, gunakan kelas lajur grid (cth., col-sm-4, col-lg-2) untuk menentukan lebar kad.

2. Dayakan Flexbox:

Bootstrap 4 Alpha 6 dan versi yang lebih baru menggunakan flexbox secara lalai. Walau bagaimanapun, jika anda menggunakan versi terdahulu, anda mungkin perlu mendayakannya secara manual dengan CSS berikut:

.row > div[class*='col-'] {
  display: flex;
  flex: 1 0 auto;
}

3. Tetapkan Ketinggian Kad:

Untuk memastikan semua kad mempunyai ketinggian yang sama, tambahkan kelas h-100 pada setiap kad:

<div class="card h-100">
  ...
</div>

4. Titik Putus Responsif:

Gunakan kelas col-- untuk menentukan lebar kad yang berbeza untuk saiz port pandangan tertentu (iaitu, lebar skrin):

<div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
  ...
</div>

Kod Contoh:

<div class="row">
  <div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
    ...
  </div>
  <div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
    ...
  </div>
  <div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
    ...
  </div>
  <div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
    ...
  </div>
</div>

Penyelesaian ini membolehkan anda membuat dek kad responsif yang mengubah saiz berdasarkan saiz port pandangan, memastikan reka letak anda menyesuaikan diri dengan skrin yang berbeza.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Dek Kad Responsif dengan Lebar Kad Boleh Ubah dalam Bootstrap 4?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!