Bootstrap 4에서 열을 어떻게 재정렬할 수 있나요?

Bootstrap4를 통해 열 순서 지정

Bootstrap4의 열 순서 변경은 사용 중인 Bootstrap 버전과 요구 사항에 따라 다양한 기술을 사용하여 수행할 수 있습니다.

부트스트랩 4.1(현재 버전)**

부트스트랩 4.1에서는 새로운 반응형 순서 클래스 세트인 order-first, order-last, order-0부터 order-12까지 도입되었습니다. 이러한 클래스를 사용하면 다양한 화면 크기에서 열 순서를 더 유연하게 제어할 수 있습니다.

원하는 모바일 보기(1-3-2)에서 열 순서를 지정하려면 다음 코드를 사용하세요.

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

Bootstrap 4(이전 버전)**

Bootstrap 4 이전 버전(4.1 이전)에서는 push 및 pull 클래스를 사용하여 제어했습니다. 열 순서. 그러나 Bootstrap 4.0 베타부터 이러한 클래스는 더 이상 사용되지 않으며 push-{viewport}-{units} 및 pull-{viewport}-{units}로 대체되었습니다.

4.0 이전 베타

4.0 이전 베타를 사용하여 원하는 레이아웃(1-3-2)을 얻으려면 구문:

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

4.0 베타 이상

Bootstrap 4.0 베타 이상 버전의 경우 다음 구문을 사용해야 합니다.

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

다른 접근 방식

Flexbox 방향

Bootstrap 4.1 이상에서는 Flexbox 방향 유틸리티를 사용하여 열 순서를 변경할 수도 있습니다. 예를 들어 다음 코드는 모바일 화면에서 열 순서를 반대로 바꿉니다.

<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>

접을 수 있는 열

열을 정렬하는 또 다른 옵션은 접을 수 있는 열을 사용하는 것입니다. 이를 통해 화면 크기에 따라 열을 숨기거나 표시할 수 있습니다. 축소 및 표시 클래스를 사용하여 축소 가능한 열을 구현합니다.

Bootstrap4를 통해 열을 정렬하는 방법에 대한 자세한 내용과 데모는 제공된 코드 예제와 문서를 참조하세요.

위 내용은 Bootstrap 4에서 열을 어떻게 재정렬할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!