`col-lg-push` 및 `col-lg-pull`을 사용하여 Bootstrap 3에서 열 순서를 어떻게 제어할 수 있습니까?

Twitter Bootstrap 3에서 col-lg-push 및 col-lg-pull을 사용하여 열 순서 조작

Twitter Bootstrap 3에서 col -lg-push 및 col-lg-pull 클래스를 사용하면 개발자가 데스크톱 이상의 그리드 레이아웃에서 열 순서를 조작할 수 있습니다. 뷰포트. 이 기능은 특정 화면 크기에서 특정 순서로 열을 표시해야 하는 반응형 레이아웃을 생성할 때 특히 유용합니다.

col-lg-push 및 col-lg-pull 이해

• col-lg-push-x: 이 클래스는 열을 오른쪽으로 밀어냅니다. 지정된 수의 열을 그리드에서 효과적으로 오른쪽으로 이동합니다.
• col-lg-pull-x: 이 클래스는 지정된 열 수만큼 왼쪽으로 열을 당깁니다. , 그리드에서 위치를 왼쪽으로 이동합니다.

구문 및 사용법

이러한 클래스를 사용하려면 열 너비를 정의하는 col-lg-* 클래스에 추가하면 됩니다. 예를 들어 한 열을 오른쪽으로 5칸 푸시하려면 col-lg-5 col-lg-push-5 클래스를 사용하면 됩니다.

예

다음 마크업을 고려하세요.

<div class="row">
  <div class="col-lg-5 col-lg-push-5">Content B</div>
  <div class="col-lg-5 col-lg-pull-5">Content A</div>
  <div class="col-lg-2">Content C</div>
</div>

데스크톱 뷰포트(lg가 적용되는 경우)에서 콘텐츠 B는 5개 열만큼 오른쪽으로 밀려 콘텐츠 C의 오른쪽에 배치됩니다. 콘텐츠 A는 5개 열만큼 왼쪽으로 당겨져 콘텐츠 B의 왼쪽에 효과적으로 배치됩니다. 결과는 다음과 같습니다.

[Content B] [Content A] [Content C]

모바일 뷰포트 예외

밀기 및 당기기 기능은 더 큰 뷰포트에만 적용된다는 점에 유의하는 것이 중요합니다. 지정된 크기보다 크거나 같습니다. 예를 들어 col-lg-push-5를 사용하면 데스크톱 뷰포트(lg가 적용되는 경우)에서만 열을 푸시합니다. 모바일 뷰포트에서는 열이 기본 순서로 렌더링됩니다.

결론

col-lg-push 및 col-lg-pull 클래스는 다음을 수행하는 강력한 방법을 제공합니다. Bootstrap 3 레이아웃에서 열 순서를 조작합니다. 구문 및 사용 지침을 이해함으로써 개발자는 원하는 시각적 계층 구조를 유지하면서 다양한 화면 크기에 적응하는 반응형 레이아웃을 만들 수 있습니다.

위 내용은 `col-lg-push` 및 `col-lg-pull`을 사용하여 Bootstrap 3에서 열 순서를 어떻게 제어할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!