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
686 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!

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