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

카드 열의 동일한 높이 부트스트랩 카드

Bootstrap의 카드 열 클래스를 사용할 때 높이가 다른 카드는 고르지 않은 레이아웃을 만들 수 있습니다. 동일한 높이의 카드를 얻으려면 다음 해결 방법을 고려하십시오.

열에서 align-items-stretch 사용

card-columns 클래스가 포함된 상위 행에 유틸리티 클래스 d-flex align을 추가합니다. - 항목 - 각 열로 확장됩니다. 이렇게 하면 카드 내용이 수직으로 정렬되어 동일한 높이의 카드가 효과적으로 생성됩니다.

<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>

Bootstrap 5(BS5)의 예

다음 전체 HTML 예는 align-items-stretch 솔루션을 보여줍니다. BS5에서:

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="card mb-4">
                <img src="..." alt="" class="card-img-top">
                <div class="card-body">...</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-4">
                <img src="..." alt="" class="card-img-top">
                <div class="card-body">...</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-4">
                <img src="..." alt="" class="card-img-top">
                <div class="card-body">...</div>
            </div>
        </div>
    </div>
</div>

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