Bagaimana untuk Mencipta Dek Kad Responsif dengan Bootstrap 4?

Dek Kad Bootstrap 4 dengan Kiraan Lajur Responsif

Dalam Bootstrap 4, ciri dek kad membolehkan anda mencipta kad dengan ketinggian yang sama . Walau bagaimanapun, susun atur lalai memaparkan empat kad setiap baris tanpa mengira lebar port pandangan. Ini mungkin tidak diingini dalam semua situasi, di mana anda mungkin lebih suka reka letak responsif yang melaraskan bilangan lajur berdasarkan ruang port pandangan yang tersedia.

Untuk mencapai ini, satu pendekatan adalah menggunakan sifat paparan flexbox, menentukan nilai flex yang memaksa balut ke baris baharu selepas bilangan lajur tertentu. Ini boleh dilaksanakan menggunakan kelas grid col--:

<code class="css">.row > div[class*="col-"] {
  display: flex;
  flex: 1 0 auto;
}</code>

Dengan menambahkan CSS ini, setiap lajur dalam baris akan berkelakuan seperti item flexbox, membenarkan mereka membungkus dan melaraskan lebarnya secara dinamik berdasarkan ruang port pandang yang tersedia.

Walau bagaimanapun, dalam Bootstrap 4 Alpha 6 dan lebih baru, flexbox didayakan secara lalai untuk lajur ini. Oleh itu, tiada CSS tambahan diperlukan untuk mencapai tingkah laku responsif yang diingini. Sebaliknya, anda hanya boleh menggunakan kelas h-100 untuk menetapkan semua kad kepada ketinggian penuh.

Contoh:

<code class="html"><div class="card-deck-wrapper">
  <div class="row">
    <div class="h-100 col-sm-6 col-md-4 col-lg-3 col-xl-2">
      <div class="card">
        ...
      </div>
    </div>
    ...
  </div>
</div></code>

Penyelesaian ini menyediakan dek kad responsif yang melaraskan bilangan lajur berdasarkan lebar port pandangan, memastikan kad kekal sejajar dan ketinggian yang sama.

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