Bagaimana untuk Mencapai Ketinggian Kad Yang Sama dalam Dek Kad Bootstrap 4 dengan Kiraan Lajur Responsif?

Dek Kad Bootstrap 4 dengan Kiraan Lajur Responsif

Senario:

Melaksanakan ciri dek kad Bootstrap 4 untuk memastikan ketinggian kad yang sama merentas saiz port pandangan yang berbeza.

Isu:

Secara lalai, dek kad memaparkan empat kad pada baris tanpa mengira saiz port pandangan, yang membawa kepada saiz semula kandungan yang tidak diingini pada skrin yang lebih kecil.

Penyelesaian 1: Lajur Grid (Bootstrap 4 Alpha 2)

Sebelum sokongan Bootstrap 4 flexbox, penyelesaian yang terlibat menggunakan

elemen dengan kelas lajur grid yang sesuai (cth., col-*) untuk mengawal lebar kad. Flexbox kemudiannya digunakan untuk memaksa ketinggian yang sama:

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

Penyelesaian 2: Kelas h-100 (Bootstrap 4 Alpha 6 dan Ke Atas)

Dengan flexbox menjadi lalai dalam Bootstrap 4 Alpha 6, penyelesaian yang lebih mudah muncul:

<code class="css">.h-100 {
  height: 100%;
}</code>

Gunakan kelas h-100 pada elemen kad untuk menetapkan ketinggiannya secara automatik kepada 100%, menjadikannya sama tinggi:

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

Nota:

Untuk reka letak yang lebih responsif, pertimbangkan untuk menggunakan kelas titik putus seperti d-*-col (cth., d-md-col-6) untuk menentukan kiraan lajur pada tertentu saiz skrin.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Ketinggian Kad Yang Sama dalam Dek Kad Bootstrap 4 dengan Kiraan Lajur Responsif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

bootstrap count for using class default viewport column issue

Kenyataan：

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