Bagaimana untuk Mencipta Dek Kad Bootstrap 4 Responsif dengan Kiraan Lajur Berdasarkan Viewport?

Dek Kad Bootstrap 4 dengan Kiraan Lajur Berdasarkan Port Pandangan

Melaksanakan dek kad dalam Bootstrap 4 untuk menjajarkan kad dengan ketinggian yang sama boleh menjadi mencabar, terutamanya apabila mempertimbangkan responsif reka bentuk. Secara lalai, dek kad Bootstrap 4 merebak kad merentasi empat lajur, tanpa mengira saiz port pandangan.

Pecahan Masalah

Isu timbul apabila anda mahu kad mengekalkan penampilan yang konsisten pada port pandangan yang berbeza saiz. Persediaan lalai dalam Bootstrap 4 tidak mengambil kira saiz kad minimum atau mempertimbangkan kesan kelas viewport pada gelagat dek kad.

Penyelesaian Responsif untuk Bootstrap 4 Versi 4.1

Untuk mencipta dek kad responsif yang melaraskan bilangan lajur berdasarkan saiz port pandangan, anda boleh memanfaatkan utiliti keterlihatan yang diperkenalkan dalam Bootstrap 4. Dengan menetapkan keterlihatan untuk lajur tertentu pada titik putus tertentu, anda boleh memaksa balut dan mencipta reka letak yang diingini.

Penyelesaian Flexbox untuk Versi Bootstrap 4 Terdahulu

Untuk versi Bootstrap 4 sebelum 4.1, anda boleh menggunakan kelas grid col-* untuk mengawal lebar kad. Walau bagaimanapun, ini memerlukan coretan CSS tambahan untuk mendayakan flexbox dan memastikan lajur adalah sama tinggi.

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

Dek Kad Responsif Tinggi Penuh (Bootstrap 4 Alpha 6 dan Kemudian)

Bootstrap 4 Alpha 6 dan versi yang lebih baru mempunyai flexbox didayakan secara lalai. Oleh itu, anda boleh menggunakan kelas h-100 untuk menetapkan kad pada ketinggian penuh. Pendekatan ini menghapuskan keperluan untuk CSS tambahan untuk mengendalikan gelagat flexbox.

Ringkasnya, dengan menggunakan teknik yang sesuai berdasarkan versi Bootstrap 4 yang anda gunakan, anda boleh mencapai dek kad responsif dengan yang diingini kiraan lajur dan mengekalkan rupa dan rasa yang konsisten merentas saiz port pandangan yang berbeza.

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