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

카드 열에서 동일한 높이의 부트스트랩 카드 만들기

Bootstrap 4에서는 카드 열 클래스를 사용하여 열에 카드를 표시합니다. , 그러나 카드의 높이는 내용에 따라 다를 수 있습니다. 동일한 높이의 카드를 얻기 위해 CSS와 Flexbox의 조합을 사용할 수 있습니다.

해결책:

카드에 고정된 최소 높이를 설정하는 대신 다음을 사용할 수 있습니다. 카드 열 내의 열 요소에 대한 align-items-stretch 유틸리티. 이렇게 하면 열이 가장 높은 카드의 전체 높이까지 늘어납니다.

.card-columns .col {
    align-items: stretch;
}

구현:

카드 열을 컨테이너 안에 넣고 각 카드를 열 다음:

<div class="container">
    <div class="row">
        <div class="col-lg-4 align-items-stretch">
            <div class="card">
                <!-- Card content -->
            </div>
        </div>
        <div class="col-lg-4 align-items-stretch">
            <div class="card">
                <!-- Card content -->
            </div>
        </div>
        <div class="col-lg-4 align-items-stretch">
            <div class="card">
                <!-- Card content -->
            </div>
        </div>
    </div>
</div>

참고:

• 열 너비(이 예에서는 col-lg-4)가 모든 열에 대해 동일한지 확인하세요.
• 카드에 배경이나 테두리가 있는 경우 테두리와 배경이 정렬되도록 CSS를 조정해야 할 수도 있습니다. 맞습니다.

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