Bootstrap 4를 사용하여 반응형 카드덱을 만드는 방법은 무엇입니까?

반응형 열 수가 포함된 Bootstrap 4 카드 데크

Bootstrap 4에서 카드 데크 기능을 사용하면 동일한 높이의 카드를 만들 수 있습니다. . 그러나 기본 레이아웃은 뷰포트 너비에 관계없이 행당 4개의 카드를 표시합니다. 이는 사용 가능한 뷰포트 공간에 따라 열 수를 조정하는 반응형 레이아웃을 선호하는 모든 상황에서 바람직하지 않을 수 있습니다.

이를 달성하기 위한 한 가지 접근 방식은 Flexbox 표시 속성을 사용하여 다음을 지정하는 것입니다. 특정 수의 열 다음에 새 줄로 줄바꿈을 강제하는 플렉스 값입니다. 이는 col-- 그리드 클래스를 사용하여 구현할 수 있습니다.

<code class="css">.row > div[class*="col-"] {
  display: flex;
  flex: 1 0 auto;
}</code>

이 CSS를 추가하면 행 내의 각 열이 Flexbox 항목처럼 동작하여 래핑 및 조정이 가능해집니다. 너비는 사용 가능한 뷰포트 공간에 따라 동적으로 조정됩니다.

그러나 Bootstrap 4 Alpha 6 이상에서는 이러한 열에 대해 Flexbox가 기본적으로 활성화됩니다. 따라서 원하는 반응형 동작을 달성하기 위해 추가 CSS가 필요하지 않습니다. 대신 h-100 클래스를 사용하여 모든 카드를 전체 높이로 설정할 수 있습니다.

예:

<code class="html"><div class="card-deck-wrapper">
  <div class="row">
    <div class="h-100 col-sm-6 col-md-4 col-lg-3 col-xl-2">
      <div class="card">
        ...
      </div>
    </div>
    ...
  </div>
</div></code>

이 솔루션은 반응형 카드 데크를 제공합니다. 이는 뷰포트 너비에 따라 열 수를 조정하여 카드가 정렬되고 동일한 높이를 유지하도록 합니다.

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