Bagaimana untuk Mencapai Ketinggian Kad Yang Sama dalam Dek Kad Bootstrap 4 dengan Kiraan Lajur Responsif?-tutorial css-php.cn

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

Patricia Arquette

Lepaskan： 2024-10-29 02:37:02

asal

1063 orang telah melayarinya

How to Achieve Equal Card Height in a Bootstrap 4 Card-Deck with Responsive Column Count?

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!