모바일 레이아웃에 대해 Bootstrap 3열을 어떻게 재정렬할 수 있나요?

Bootstrap 3 모바일 레이아웃의 열 재정렬 달성

Bootstrap은 반응형 레이아웃을 생성하기 위한 강력한 그리드 시스템을 제공합니다. 그러나 모바일 레이아웃에 대한 열 순서를 명시적으로 변경하는 기능은 부족합니다. 이 문서에서는 열 재정렬을 달성하기 위한 대체 접근 방식을 살펴봅니다.

문제:

사용자가 상단 탐색 바와 두 개의 열(사이드 바와 콘텐츠)이 있는 반응형 레이아웃을 만들고 있습니다. 화면 크기가 모바일 레이아웃으로 조정되면 사이드바가 콘텐츠 바로 아래에 표시되지 않고 콘텐츠 위에 쌓입니다. 목표는 모바일에서 주요 내용이 상단에 오도록 열 순서를 재정렬하는 것입니다.

해결 방법:

열을 직접 변경할 수는 없지만 모바일 화면 주문의 경우 푸시 및 풀 클래스를 사용하는 해결 방법이 있습니다.

코드 설명:

주요 콘텐츠의 우선순위를 지정하려면 다음과 같이 열 순서를 변경하세요.

<!-- Main Content (Pushed 3 columns to the right on large screens) -->
<div class="col-lg-9 col-lg-push-3">...</div>

<!-- Sidebar (Pulled 9 columns to the left on large screens) -->
<div class="col-lg-3 col-lg-pull-9">...</div>

이 수정으로 주 콘텐츠가 3개 열만큼 오른쪽으로 이동하고 사이드바가 이동합니다. 대형 화면에서는 왼쪽에 9개 열씩 표시됩니다. 그러나 작은 화면에서는 기본 열 순서가 변경되지 않고 상단에 원하는 기본 콘텐츠 레이아웃이 표시됩니다.

사이드바에 대한 추가 고려 사항:

확장 탐색 모음 내부에 사이드바를 표시하려면 다음을 고려하세요.

• 메뉴를 확장하여 콘텐츠를 세로로 쌓을 수 있습니다.
• 기본적으로 사이드바를 숨기고 메뉴 활성화 시 JavaScript를 사용하여 표시합니다.

결론:

푸시 사용 클래스를 가져오면 대형 화면의 열 순서를 효과적으로 변경할 수 있습니다. 더 복잡한 열 레이아웃이나 모바일 재정렬의 경우 반응형 그리드 또는 CSS Flexbox와 같은 대체 솔루션을 살펴보세요.

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