Bootstrap 4에서 반응형 카드덱을 만드는 방법은 무엇입니까?

뷰포트를 기반으로 한 열 수를 포함하는 Bootstrap 4 카드 데크

Bootstrap 4에서 반응하는 열 수로 카드 데크 만들기 그리드 시스템과 Bootstrap 4에 도입된 새로운 Flexbox 기능에 대한 이해가 필요합니다.

그리드 열 사용

카드 데크 클래스에 의존하는 대신 table-cell 표시 속성에서는 그리드 col-* 클래스를 사용하여 원하는 열 너비를 지정할 수 있습니다. 이를 통해 레이아웃을 더 효과적으로 제어할 수 있고 반응형 디자인을 만들 수 있습니다.

Flexbox 활성화

Bootstrap 4에서는 Flexbox가 기본적으로 활성화되어 있습니다. 그러나 이전 버전을 사용 중이거나 Flexbox를 수동으로 활성화하려면 다음 CSS 규칙을 추가하세요.

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

동일한 높이 설정

카드의 높이가 같으면 가장 키가 큰 자식과 일치하도록 자식의 높이를 자동으로 조정하는 Flexbox의 기능을 활용할 수 있습니다. 각 카드에 h-100 클래스를 추가하기만 하면 높이가 100%가 되고 열에서 가장 높은 카드와 일치하도록 늘어납니다.

<code class="html"><div class="row">
  <div class="col-6 h-100">
    <div class="card">...</div>
  </div>
  <div class="col-4 h-100">
    <div class="card">...</div>
  </div>
  <div class="col-2 h-100">
    <div class="card">...</div>
  </div>
</div></code>

이러한 기술을 결합하여 Bootstrap 4 카드를 만들 수 있습니다. -다양한 뷰포트 크기에 맞게 조정되는 데크를 통해 카드의 높이를 동일하게 유지하고 사용 가능한 공간에 따라 적절한 크기를 지정할 수 있습니다.

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