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

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

Twitter Bootstrap의 편리한 col-lg- push 및 col-lg-pull 클래스는 대형 화면(데스크톱 또는 데스크톱)에서 열 순서를 조작할 수 있는 유연성을 제공합니다. laptop).

구문 이해

이러한 클래스의 구문은 다음과 같습니다.

• col-vp-push-x: 다음보다 크거나 같은 뷰 포트의 일반 위치에서 시작하여 열 x 오른쪽의 열 수 vp.
• col-vp-pull-x: vp보다 크거나 같은 뷰 포트의 일반 위치에서 시작하여 열 x 열 수를 왼쪽으로 당깁니다.

여기서 vp는 xs, sm, md 또는 lg일 수 있으며 x의 범위는 1에서 1 사이입니다. 12.

예시 시나리오

길이가 5인 2개와 길이가 2인 1개의 열로 구성된 그리드를 표시하려는 다음 예를 고려하십시오.

• 데스크톱 보기(≥ lg): 가로로 [5] [5] [2] 표시.
• 모바일 보기(≤ sm): [5](초) [5](첫 번째) 표시 [2] 수직으로.

코드:

<div class='row'>
  <div class='col-lg-5 col-lg-push-5'></div>
  <div class='col-lg-5 col-lg-pull-5'></div>
  <div class='col-lg-2'></div>
</div>

설명:

• 첫번째 col-lg -5 요소가 5열 오른쪽으로 푸시되므로 정상 이후 5열이 시작됩니다. position.
• 두 번째 col-lg-5 요소는 왼쪽으로 5열만큼 당겨지므로 정상 위치보다 5열부터 시작됩니다.
• col-lg-2 요소는 그대로 유지됩니다. 기본 순서입니다.

참고: 올바른 기능을 보장하려면 마크업에서 요소의 순서가 올바른지 확인하세요. 더 큰 화면에서 원하는 순서와 일치합니다.

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