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

Bootstrap 카드를 카드 열에서 동일한 높이로 만드는 방법

Bootstrap 4로 작업할 때 모든 카드를 만들어야 할 수도 있습니다. 카드 열 레이아웃에서는 동일한 높이를 공유합니다. 이는 일관되고 시각적으로 보기 좋은 모양을 보장합니다.

문제 설명

Bootstrap 문서의 voorbeeld를 사용하여 어떻게 모든 카드를 다시 사용하지 않고 동일한 높이를 갖도록 할 수 있습니까? 하드코딩하다 솔루션?

답변

Align-Items 속성 추가

동일한 카드 높이를 얻으려면 align- 카드가 포함된 행 또는 열 요소의 items 속성. 이 속성은 플렉스 항목이 컨테이너 내에서 수직으로 정렬되는 방식을 지정합니다.

옵션 1: 행에 사용

카드 열 요소를 행 요소 내에 래핑하고 align-items-stretch 클래스를 여기에 추가합니다. 이렇게 하면 카드가 수직으로 정렬되어 가장 높은 카드와 일치하도록 높이가 늘어납니다.

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

옵션 2: 열에 사용

또는 다음을 추가할 수 있습니다. align-items-stretch 클래스를 각 col 요소에 직접 연결합니다. 이렇게 하면 각 열 내에서 카드가 수직으로 정렬되어 사실상 동일한 높이가 됩니다.

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

Bootstrap 5 업데이트

Bootstrap 5에서 align-items- 개별 카드에 대한 더 나은 제어를 위해 Stretch 클래스가 align-self-stretch 클래스로 대체되었습니다. alignment.

<div class="row">
    <div class="col-lg-4">
        <div class="card align-self-stretch">...</div>
    </div>
    <div class="col-lg-4">
        <div class="card align-self-stretch">...</div>
    </div>
    <div class="col-lg-4">
        <div class="card align-self-stretch">...</div>
    </div>
</div>

참고: 행 요소에 align-items를 사용하면 카드의 테두리가 숨겨지지만 열 요소에 사용하면 그렇지 않습니다. 귀하의 디자인 요구 사항에 가장 적합한 방법을 선택하세요.

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