Bootstrap 4에서 반응적으로 열을 정렬하려면 어떻게 해야 합니까?

Bootstrap 4를 사용하여 열 정렬

반응형 레이아웃을 위한 열 재정렬

Bootstrap 4는 다음을 제공합니다. 다양한 화면 크기에 걸쳐 열을 정렬하기 위한 단순화된 메커니즘입니다. 이 기사에서는 이를 달성하기 위한 다양한 방법을 살펴봅니다.

Bootstrap 4.1

Bootstrap 4.1에 Flexbox가 도입되면서 열 순서 지정이 더욱 간단해졌습니다. 이제 order 유틸리티 클래스를 사용하면 order-1에서 order-12까지 원하는 열 순서를 지정할 수 있습니다. 반응형 정렬은 중형 화면(XXL, XL, LG, MD)에서는 열을 마지막으로 배치하고 초소형 화면(XS)에서는 두 번째로 열을 배치하는 order-md-12 order-2와 같은 클래스를 결합하여 달성할 수 있습니다.

예:

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

부트스트랩 4

Bootstrap 4.1 이전에는 열 순서가 푸시 및 풀 클래스에 의존했습니다. 이러한 클래스는 Bootstrap 4에서 수정되었으며 push-{viewport}-{units} 및 pull-{viewport}-{units} 구문을 따릅니다. 모바일/초소형 화면에서 원하는 1-3-2 레이아웃을 얻으려면 다음 클래스가 사용됩니다.

예:

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

참고: 이 방법은 Bootstrap 4.1에서 더 이상 사용되지 않습니다. .

Flexbox 방향 유틸리티

Bootstrap 4.1은 순서 유틸리티 외에도 flex-column-reverse 및 flex-md-row 클래스도 제공합니다. 이 클래스를 사용하면 다양한 화면 크기에서 열 방향을 변경할 수 있습니다. 예를 들어, 다음 코드는 모바일 화면에서는 열을 세로로 정렬하고 중형 이상의 화면에서는 가로로 정렬합니다.

예:

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

위 내용은 Bootstrap 4에서 반응적으로 열을 정렬하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!