`col-lg-push` 및 `col-lg-pull`을 사용하여 부트스트랩 3개 열을 재정렬하는 방법은 무엇입니까?

Twitter Bootstrap 3에서 col-lg-push 및 col-lg-pull을 사용하여 열 순서 재정렬

Bootstrap 3에서 열 순서를 지정하면 개발자가 다양한 화면 크기에 맞게 행 내의 열 위치를 조정합니다. col-lg-push 및 col-lg-pull 클래스는 이러한 목적을 위해 특별히 설계되었으며 대형 화면 장치(데스크톱 및 노트북)에서 열 레이아웃을 제어할 수 있습니다.

열 순서를 사용자 정의하려면 다음을 수행해야 합니다.

1. HTML에서 순서 정의: HTML 마크업에서 열 순서를 변경합니다. 예를 들어, 두 번째 5그리드 열이 먼저 표시되도록 하려면 해당 내용을 코드에서 첫 번째 5그리드 열 앞에 배치하세요.
2. 푸시 클래스 사용: 열 추가 오른쪽으로 이동하려는 열에 lg-push-5 클래스를 추가하세요. 이 클래스는 열을 원래 위치에서 5열만큼 밀어냅니다.
3. 풀 클래스 사용: 왼쪽으로 이동하려는 열에 col-lg-pull-5 클래스를 추가합니다. . 이 클래스는 열을 왼쪽으로 5칸씩 당깁니다.

예:

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

설명:

이 예에서는 두 번째 열이 다음을 사용하여 5개 열만큼 오른쪽으로 푸시됩니다. col-lg-push-5, 대형 화면에서 세 번째 열 뒤에 표시됩니다. 첫 번째 열은 col-lg-pull-5를 사용하여 5개 열만큼 왼쪽으로 당겨져 세 번째 열 앞으로 가져옵니다. 이렇게 하면 모바일에서는 [5](두 번째), [5](첫 번째), [2], 데스크톱에서는 [5] [5] [2] 등 원하는 레이아웃이 생성됩니다.

당기기 및 이해하기 푸시:

• 당기기: 열을 다음으로 이동합니다. 왼쪽.
• 푸시: 열을 오른쪽으로 이동합니다.

참고:

• 푸시 및 풀 클래스는 지정된 화면 크기의 열 순서에만 영향을 미칩니다(이 경우 대형 화면).
• Bootstrap은 기본적으로 모바일 레이아웃을 우선시하므로 클래스는 더 작은 화면 크기에 영향을 주지 않습니다.

위 내용은 `col-lg-push` 및 `col-lg-pull`을 사용하여 부트스트랩 3개 열을 재정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!