lajur bootstrap mempunyai ketinggian yang sama

Question

Ini mungkin mudah tetapi saya tidak tahu bagaimana untuk membetulkannya.

Saya menggunakan Bootstrap5.

Kod penuh di sini: https://www.codeply.com/p/BywuhLNUXy

Nampaknya codeply mempunyai beberapa masalah... Jadi saya meletakkannya pada jsfiddle juga

https://jsfiddle.net/paul_z/y7a6dnkf/1/

Terutamanya halaman direktori kenalan. Struktur kod ialah

<div class="container">
<div class="row gy-5">

    <div class="col-lg-6">
        <div class="card m-b-30">
            <div class="card-body py-5">
                <div class="row">
                    <div class="col-lg-4 text-center">            
                    <img src="/static/logo.png" alt="logo" >            
                    </div>
                <div class="col-lg-8">
                    <h5 class="card-text mb-0"><i class="fa-solid fa-person"></i> user 1</h5>
                    <p class="card-text">CDD IT Informatique</p>
                    <hr class="dropdown-divider">                
                    <p class="card-text"><i class="fa-sharp fa-solid fa-building"></i> ###</p>        
                    <p class="card-text"><i class="fa-solid fa-envelope"></i> mail</p>        
                    <p class="card-text"><i class="fa-solid fa-phone"></i> phone</p>
               </div>
                </div>
              </div>
        </div>
    </div>
    
    ...

Pada skrin besar, ia memaparkan dua kad dalam lajur.

Masalahnya ialah kad kadangkala mempunyai ketinggian yang berbeza. Contohnya, untuk pengguna 2, peranannya berubah kepada: "Enseignant Chercheur Astrophysicalque Hautes Energies" dan bukannya "CDD IT Informatique", jadi baris ini memerlukan dua baris dan bukannya satu. Jadi kad pengguna 2 mempunyai ketinggian yang berbeza daripada kad lain.

Bagaimana saya boleh menyelesaikannya? Saya tidak tahu saiz kad itu, jadi saya tidak boleh membetulkannya secara tersirat (yang mungkin bukan idea yang baik).

P.S.: Saya akan mengalami masalah yang sama jika logo adalah saiz yang berbeza. Sesetengah logo menukar ketinggian kad walaupun menggunakan img-fluid, widht, max-widht, max-height, dsb. Tetapi saya fikir pertama saya perlu menyelesaikan masalah ketinggian yang mudah.

Answer 1

Code snippet



.card {
  height: 100%;
}




This will set the height of all cards to 100% of their parent container. This will ensure that all cards have the same height, regardless of the content inside them.

To fix the problem of the logos having different sizes, you can use the following CSS:



Code snippet
.card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}




This will set the maximum width and height of the logos to 100%. This will ensure that the logos are never larger than their parent container. The object-fit: cover property will ensure that the logos are scaled to fill their container, without distorting their aspect ratio.

I hope this helps

Answer 2

col Elemen sudah mempunyai ketinggian yang sama - Pelaksanaan grid berasaskan Flexbox Bootstrap v5 sudah melakukan perkara ini.

Apa yang anda perlu lakukan ialah membuat kad mengambil 100% ketinggian induknya:

.card { height: 100%; }