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

Bootstrap 4 - 열에서 동일한 높이의 카드 만들기

문제:

Bootstrap 카드를 다룰 때 높이가 카드의 길이는 카드 제목의 길이에 따라 달라질 수 있습니다. 이러한 불일치로 인해 열에 배열할 때 카드의 높이가 다를 수 있습니다.

해결책:

이미 Bootstrap 4 열에 사용되는 Flexbox를 활용하여 모든 카드가 카드의 높이는 동일합니다. 높이 100%를 나타내는 h-100 클래스를 각 카드에 추가하면 카드가 해당 열 내에서 사용 가능한 높이를 자동으로 채웁니다.

예:

<code class="html"><div class="row">
  <div class="col-md-4 col-sm-6 col-12">
    <div class="card h-100">
      ...
    </div>
  </div>
  <!-- Similar cards and columns -->
</div></code>

추가 참고 사항:

• 카드는 이미 행과 열로 배열되어 있으므로 카드를 떠둘 필요가 없습니다.
• 중첩 .col-*을 피하세요. .card-deck 내의 클래스; 대신 .row 내에 직접 배치해야 합니다.

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