Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Mencapai Ketinggian Sama untuk Kad dalam Bootstrap 4 Lajur?

Bagaimana untuk Mencapai Ketinggian Sama untuk Kad dalam Bootstrap 4 Lajur?

DDD
Lepaskan: 2024-10-30 06:49:02
asal
632 orang telah melayarinya

How to Achieve Equal Heights for Cards in Bootstrap 4 Columns?

Menyamakan Ketinggian Kad Bootstrap 4 dalam Lajur

Seperti yang dinyatakan, rangka kerja Bootstrap 4 sudah melaksanakan flexbox pada lajur, yang memastikan ianya pada mulanya sama tinggi. Untuk mencapai ketinggian kad yang sama dalam lajur ini, pertimbangkan untuk menggunakan kelas h-100 pada kad. Kelas ini menetapkan ketinggian kepada 100%, membolehkan kad untuk mengisi sepenuhnya ruang yang tersedia dalam setiap lajur.

Berikut ialah contoh cara melaksanakannya menggunakan h-100:

<code class="html"><div class="container">
    <div class="row">
        <div class="col-md-4 col-sm-6 col-12">
            <div class="card h-100">
                ...
            </div>
        </div>
        <div class="col-md-4 col-sm-6 col-12">
            <div class="card h-100">
                ...
            </div>
        </div>
        <div class="col-md-4 col-sm-6 col-12">
            <div class="card h-100">
                ...
            </div>
        </div>
    </div>
</div></code>
Salin selepas log masuk

Pengubahsuaian ini memastikan bahawa kad dalam setiap lajur mempunyai ketinggian yang sama, tanpa mengira kandungannya. Adalah penting untuk ambil perhatian bahawa kelas .card-deck, yang sebelum ini mengandungi kad, tidak lagi diperlukan.

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

sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan