Bootstrap 4에서 가변 카드 너비로 반응형 카드 데크를 만드는 방법은 무엇입니까?

가변 카드 너비의 Bootstrap 4 카드 데크

문제:

Bootstrap 4 카드 -덱 기능은 카드를 나란히 정렬하지만 모든 카드는 뷰포트 크기에 관계없이 동일한 너비를 갖습니다. 이로 인해 더 좁은 화면에서 프레젠테이션이 최적이 아닐 수 있습니다.

해결책:

뷰포트 크기에 따라 카드 너비가 다양한 반응형 카드 데크를 생성하려면 다음 단계:

1. 카드 데크 사용 제거:

카드 데크 클래스는 유연성을 제한하는 테이블 셀 레이아웃을 사용합니다. 대신 그리드 열 클래스(예: col-sm-4, col-lg-2)를 사용하여 카드 너비를 정의하세요.

2. Flexbox 활성화:

Bootstrap 4 Alpha 6 이상 버전에서는 기본적으로 Flexbox를 사용합니다. 그러나 이전 버전을 사용하는 경우 다음 CSS를 사용하여 수동으로 활성화해야 할 수도 있습니다.

.row > div[class*='col-'] {
  display: flex;
  flex: 1 0 auto;
}

3. 카드 높이 설정:

모든 카드의 높이가 동일하도록 하려면 각 카드에 h-100 클래스를 추가하세요.

<div class="card h-100">
  ...
</div>

4. 반응형 중단점:

col-- 클래스를 사용하여 특정 뷰포트 크기(예: 화면 너비)에 대해 다양한 카드 너비를 정의합니다.

<div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
  ...
</div>

예제 코드:

<div class="row">
  <div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
    ...
  </div>
  <div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
    ...
  </div>
  <div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
    ...
  </div>
  <div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
    ...
  </div>
</div>

이 솔루션을 사용하면 뷰포트 크기에 따라 크기가 조정되는 반응형 카드 데크를 생성하여 레이아웃이 다양한 화면에 맞게 조정되도록 할 수 있습니다.

위 내용은 Bootstrap 4에서 가변 카드 너비로 반응형 카드 데크를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!