Bootstrap 4 및 5에서 열을 효과적으로 정렬하는 방법은 무엇입니까?

Bootstrap 4를 사용한 열 정렬

Bootstrap 4에서는 클래스와 Flexbox의 조합을 사용하여 열 정렬을 수행할 수 있습니다. 모바일 화면에서 원하는 1-3-2 레이아웃을 얻기 위해 다음 기술을 살펴보겠습니다.

2021 - Bootstrap 5

Bootstrap 5에서는 다음을 위한 새로운 클래스를 도입했습니다. 반응형 순서: 순서 우선, 순서 마지막, 순서 0부터 순서 5까지. 이를 통해 열 순서가 단순화되어 각 뷰포트 크기에 대해 원하는 순서를 설정할 수 있습니다.

2018 - Bootstrap 4

4.0 이전 베타:

Bootstrap 4.0 베타 이전에는 푸시 및 풀 클래스 형식이 있었습니다. xs- 접두사가 없는 push-{viewport}-{units} 및 pull-{viewport}-{units}. 모바일에서 1-3-2 레이아웃을 구현하려면 다음과 같은 클래스를 사용합니다.

<div class="col-3 col-md-6"></div>
<div class="col-6 col-md-12 push-xs-6 pull-xs-3"></div>
<div class="col-3 col-md-6 pull-xs-6"></div>

Bootstrap 4.1 이상

Bootstrap 4.1에서는 flexbox를 도입하여 다음을 제공합니다. 열을 정렬하는 보다 직관적인 방법입니다. 반응형 순서 클래스의 범위는 order-1부터 order-12까지입니다. 이러한 클래스를 설정하면 상위 .row를 기준으로 열 순서를 지정할 수 있습니다.

<div class="row">
  <div class="col-3 col-md-6 order-2 order-md-12">1</div>
  <div class="col-6 col-md-12 order-3">3</div>
  <div class="col-3 col-md-6 order-1">2</div>
</div>

Flexbox 방향을 사용하여 순서 변경

클래스 순서 지정 외에도 , Bootstrap 4.1에서는 Flexbox 방향 유틸리티를 사용하여 열 순서를 뒤집을 수도 있습니다.

<div class="row flex-column-reverse flex-md-row">
  <div class="col-md-8">1st on mobile</div>
  <div class="col-md-4">2</div>
</div>

위 내용은 Bootstrap 4 및 5에서 열을 효과적으로 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!