부트스트랩 열의 높이가 동일합니다.

Question

간단할 수도 있지만 해결 방법을 모르겠습니다.

저는 Bootstrap5를 사용합니다.

전체 코드는 여기: https://www.codeply.com/p/BywuhLNUXy

codeply에 문제가 있는 것 같습니다... 그래서 jsfiddle에도 올렸어요

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

주로 연락처 디렉토리 페이지입니다. 코드 구조는

으아악

큰 화면에서는 두 개의 카드가 열로 표시됩니다.

문제는 카드의 높이가 가끔 다르다는 것입니다. 예를 들어 사용자 2의 경우 역할이 "CDD IT Informatique" 대신 "Enseignant Chercheur Asphysicalque Hautes Energies"로 변경되므로 이 줄에는 한 줄이 아닌 두 줄이 필요합니다. 따라서 사용자 2의 카드는 다른 카드와 높이가 다릅니다.

어떻게 해결하나요? 카드의 크기를 모르기 때문에 암묵적으로 고칠 수는 없습니다(아마도 이는 아마도 좋은 생각이 아닐 것입니다).

P.S.: 로고의 크기가 다르면 같은 문제가 발생합니다. img-fluid, widht, max-widht, max-height 등을 사용함에도 불구하고 일부 로고는 카드 높이를 변경합니다. 하지만 먼저 간단한 높이 문제를 해결해야 한다고 생각합니다.

Answer 1

으아악

Answer 2

col 요소의 높이는 이미 동일합니다. Bootstrap v5의 Flexbox 기반 그리드 구현에서는 이미 이 작업을 수행하고 있습니다.

당신이 해야 할 일은 카드가 부모 높이의 100%를 차지하도록 만드는 것입니다:

으아악