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

열 내의 Bootstrap 4 동일 높이 카드

문제

Bootstrap 4를 사용하는 많은 개발자는 공통적인 문제에 직면합니다. 즉, 열 내의 카드 높이가 종종 다릅니다. , 주로 내용이나 제목 크기의 차이로 인해 발생합니다. 이로 인해 고르지 않고 시각적으로 보기 좋지 않은 레이아웃이 생성될 수 있습니다.

해결책

Bootstrap 4개 열 내에서 동일한 높이의 카드를 얻으려면 h-100 클래스를 활용하여 높이를 설정하세요. 포함된 열의 100%에 카드를 추가합니다. 이렇게 하면 카드가 사용 가능한 공간의 전체 높이를 차지하게 됩니다.

구현

HTML 마크업:

<code class="html"><div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-6 col-12">
      <div class="card h-100">
        ...
      </div>
    </div>
    ...
  </div>
</div></code>

참고:

• .col-* 클래스는 과 같은 중간 요소가 아닌 .card div에 직접 적용해야 합니다. Card-deck.
• 카드에 float 사용은 불필요합니다.
• h-100 클래스는 모든 카드에 적용 가능합니다. 열 내에서 또는 선택적으로 특정 카드에 대상 높이 조정을 적용합니다.

예제 코드(Codeply):

https://codeply.com/go/ ㅎKhPuxoovH

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