Bootstrap 4 카드의 열 높이를 동일하게 만드는 방법은 무엇입니까?

Bootstrap 4: 열에 동일한 높이의 카드

문제:

Bootstrap 4를 사용하면 열 내의 카드가 다릅니다. 제목 텍스트 길이에 따른 높이. 콘텐츠의 높이가 다른 경우에도 동일한 높이의 카드를 어떻게 얻을 수 있습니까?

답변:

우려와는 달리 Bootstrap 4 열은 이미 flexbox를 활용하고 있습니다. 이는 본질적으로 동일한 높이를 보장합니다. 카드가 해당 열의 전체 높이를 차지하게 하려면 다음 코드 조각에서 볼 수 있듯이 카드에 h-100 클래스를 추가하기만 하면 됩니다.

<code class="html"><div class="col-md-4 col-sm-6 col-12">
  <div class="card h-100">
    ...
  </div>
</div></code>

추가 고려 사항:

• 카드는 불필요하므로 플로팅하지 마세요.
• .row에서 .card-deck 클래스를 제거하세요. .col-*은 .row의 직계 하위 항목이어야 합니다.

데모:

실시간으로 보려면 https://codeply.com/go/hKhPuxoovH를 방문하세요. 솔루션 시연.

위 내용은 Bootstrap 4 카드의 열 높이를 동일하게 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!