부트스트랩 카드 열에서 동일한 카드 높이를 달성하는 방법은 무엇입니까?

Bootstrap 카드 열: 동일한 카드 높이 달성

Bootstrap 4에서 카드 열 클래스를 사용하면 여러 카드가 배열되는 미학적으로 보기 좋은 레이아웃을 만들 수 있습니다. 높이가 가변적인 기둥. 그러나 이로 인해 카드 높이가 고르지 않게 되어 바람직하지 않을 수 있습니다.

균일한 카드 높이를 달성하기 위해 Bootstrap은 두 가지 솔루션을 제공합니다.

옵션 1: 행 또는 행에 높이 설정 열 요소

행이나 열에 align-items-stretch 유틸리티 클래스를 설정하여 카드 높이를 정렬할 수 있습니다. 카드가 포함된 요소입니다. 이렇게 하면 사용 가능한 공간을 채우기 위해 카드가 수직으로 늘어납니다.

<div class="container">
  <div class="row">
    <div class="col-lg-4 d-flex align-items-stretch">
      <!--CARD HERE-->
    </div>
    <div class="col-lg-4 d-flex align-items-stretch">
      <!--CARD HERE-->
    </div>
    <div class="col-lg-4 d-flex align-items-stretch">
      <!--CARD HERE-->
    </div>
  </div>
</div>

옵션 2: Bootstrap 5용 Flexbox 솔루션

Bootstrap 5의 경우 다음 CSS 코드는 다음과 같습니다. Flexbox를 사용하여 카드 열 내에서 동일한 카드 높이를 달성하는 데 사용됩니다. 속성:

.card-columns {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}

CodePen의 예

CodePen에서 이 솔루션의 실시간 데모를 보려면 다음 링크를 방문하세요.
https://codepen .io/Kerrys7777/pen/QWgwEeG

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