ブートストラップ列の高さは同じです

Question

これは簡単かもしれませんが、修正方法がわかりません。

Bootstrap5を使用しています。

完全なコードはここにあります: https://www.codeply.com/p/BywuhLNUXy

codeply にはいくつかの問題があるようです... それで私はそれをjsfiddleにも置きました

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

主に連絡先ディレクトリのページです。 コード構造は

です リーリー

大きな画面に、2 枚のカードが縦に並んで表示されます。

問題は、カードの高さが異なる場合があることです。 たとえば、ユーザー 2 の場合、彼の役割は「CDD IT Informatique」ではなく「Enseignant Chercheur Astrophysicalque Hautes Energies」に変更されるため、この行には 1 行ではなく 2 行が必要になります。したがって、ユーザー 2 のカードの高さは他のカードとは異なります。

どうすれば解決できますか? カードのサイズがわからないので、それを暗黙的に修正することはできません (いずれにせよ、これはおそらく良い考えではありません)。

追伸: ロゴのサイズが異なる場合も同じ問題が発生します。一部のロゴは、img-fluid、widht、max-width、max-height などを使用しているにもかかわらず、カードの高さを変更します。しかし、まずは単純な高さの問題を解決する必要があると思います。

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 要素はすでに同じ高さを持っています - Bootstrap v5 の Flexbox ベースのグリッド実装では、これがすでに行われています。

必要なのは、カードがその親の高さの 100% を占めるようにすることだけです:

リーリー