모바일 우선 레이아웃을 위해 부트스트랩 3열을 재정렬하는 방법은 무엇입니까?

모바일 레이아웃에서 Bootstrap 3개 열 재정렬

문제:

반응형 레이아웃에는 고정된 상단 탐색 모음과 두 개의 열이 있습니다. 그 아래에는 사이드바와 메인 콘텐츠가 있습니다. 데스크톱에서는 레이아웃이 예상대로 작동하지만 모바일 장치에서는 사이드바가 기본 콘텐츠 위에 쌓여 원하지 않는 위치에 놓입니다. 모바일에서 원하는 순서는 메인 콘텐츠를 먼저 표시한 다음 사이드바를 표시하는 것입니다.

답변:

Bootstrap에서는 모바일에서 열 순서를 직접 변경할 수 없습니다. 3. 그러나 해결 방법은 Bootstrap의 반응형 열 재정렬 기능을 활용하는 것입니다. 화면.

단계:

1. HTML에서 열 순서를 재정렬하고 기본 콘텐츠를 먼저 배치합니다.

<div class="col-lg-9 col-lg-push-3">...</div>
<div class="col-lg-3 col-lg-pull-9">...</div>

2. 기본적으로 이 클래스는 모바일에서도 메인 콘텐츠를 먼저 표시합니다.
3. col-lg-push-3 클래스는 기본 콘텐츠를 3개 열을 오른쪽으로 푸시하고, col-lg-pull-9 클래스는 사이드바 9개 열을 왼쪽으로 끌어서 원하는 순서를 얻습니다. 대형 화면.

설명:

Bootstrap에서는 열이 특정 화면 크기에 대해 col-push 및 col-pull을 사용하여 위치를 변경할 수 있습니다. 대형 화면에 col-lg-push 및 col-lg-pull을 사용하면 열은 소형 기기에서는 원래 순서를 유지하면서 해당 화면에서 지정된 순서를 가정합니다.

위 내용은 모바일 우선 레이아웃을 위해 부트스트랩 3열을 재정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!