모바일 레이아웃에 대해 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

새로운 프로젝트가 시작될 때, Sass 컴파일은 눈을 깜박이게합니다. 특히 BrowserSync와 짝을 이루는 경우 기분이 좋습니다.

이번 주에 플랫폼 뉴스 라운드 업 RONDUP, Chrome은로드에 대한 새로운 속성, 웹 개발자를위한 접근성 사양 및 BBC Move를 소개합니다.

이것은 처음으로 HTML 요소를보고 있습니다. 나는 그것을 잠시 동안 알고 있었지만 아직 스핀을 위해 그것을 가져 갔다. 그것은 꽤 시원하고 있습니다

구매 또는 빌드는 기술 분야의 고전적인 논쟁입니다. 신용 카드 청구서에 라인 항목이 없기 때문에 물건을 구축하는 것이 저렴할 수 있지만

한동안 iTunes는 팟 캐스팅에서 큰 개 였으므로 "Podcast 구독"을 링크 한 경우 다음과 같습니다.

이번 주에 타이포그래피를 검사하기위한 편리한 북마크 인 Roundup, JavaScript 모듈과 Facebook의 Facebook 등을 어떻게 가져 오는지 땜질하기 위해 대기하는 편리한 북마크 인 Roundup과 Facebook의

사이트에서 방문자 및 사용 데이터를 추적하는 데 도움이되는 분석 플랫폼이 많이 있습니다. 아마도 널리 사용되는 Google 웹 로그 분석
