모바일 레이아웃에서 Bootstrap 3 열 순서를 어떻게 변경합니까?
상단 고정 탐색 메뉴로 반응 형 레이아웃을 만들고 있습니다. 그 아래에는 세로 막대 (3)와 내용 (9)에 대한 두 개의 열이 있습니다. 데스크탑에서 다음과 같이 보이는 것은
탐색 모음
[3] [9]
resize모바일 navbar로 압축 하면 숨겨지고 사이드 바는 다음과 같이 내용 위에 쌓입니다.
탐색 모음
[3]
[9]
메인 콘텐츠를 맨 위에 표시하려면 모바일 주문을 다음과 같이 변경해야합니다.
탐색 모음
[9]
[3]
내가 찾은 이 문서 같은 점을 다루고 있지만, 허용 대답은 솔루션이 더 부트 스트랩의 현재 버전에 적용 말할 위해 편집되었다.
모바일에서이 항목을 어떻게 재정렬 할 수 있습니까? 또는 sidbar 목록 그룹을 확장 탐색 메뉴로 가져 오려면 어떻게해야합니까?
내 코드는 다음과 같습니다.
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<a href="#" class="navbar-brand">Brand Title</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right"><!--original navbar-->
<li class="active"><a href="#">Home</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
</div>
</div><!--End Navbar Div-->
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="list-group">
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Lorem ipsum</h4>
<p class="list-group-item-text">Lorem Ipsum is simply dummy text.</p></a>
</div>
</div><!--end sidebar-->
<div class="col-lg-9">
<div class="panel panel-default">
<div class="panel-body">
<div class="page-header">
Main Content
</div>
</div>
</div><!--end main content area-->
작은 화면에서는 열 순서를 변경할 수 없지만 큰 화면에서는 열 순서를 변경할 수 있습니다.
따라서 열 순서를 변경하십시오.
<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>
<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>
기본적으로 메인 콘텐츠가 먼저 표시됩니다.
따라서 모바일 기본 컨텐츠가 먼저 표시됩니다.
으로 사용 col-lg-push하고 col-lg-pull우리는 오른쪽에 왼쪽과 주요 내용에 큰 화면과 화면의 사이드 바에서 열 순서를 변경할 수 있습니다.
2018 업데이트
Bootstrap 3을 기반으로 한 원래 질문의 경우 해결책은 push-pull 을 사용하는 것 입니다.
에서 부트 스트랩 4 지금의 수 , 순서를 변경하려면 열을 전체 폭이 쌓인 경우에도 부트 스트랩 4 인 flexbox 덕분에, 수직. OFC에서 푸시 풀 방법은 여전히 작동하지만 이제 Bootstrap 4에서 열 순서를 변경하는 다른 방법이 있으므로 전각 열의 순서를 바꿀 수 있습니다.
방법 1 - 사용 flex-column-reverse을위한 xs화면 :
<div class="row flex-column-reverse flex-md-row">
<div class="col-md-3">
sidebar
</div>
<div class="col-md-9">
main
</div>
</div>
방법 2 - 사용 order-first을위한 xs화면 :
<div class="row">
<div class="col-md-3">
sidebar
</div>
<div class="col-md-9 order-first order-md-last">
main
</div>
</div>
부트 스트랩 4 (알파 6) : http://www.codeply.com/go/bBMOsvtJhD
부트 스트랩 4.1 : https://www.codeply.com/go/e0v77yGtcr
원본 3.x 답변
Bootstrap 3 기반 의 원래 질문의 경우 해결책은 더 넓은 너비에 푸시 풀 을 사용 하는 것이 었으며 열은 더 작은 (xs) 너비의 자연 순서입니다. (AB는 BA와 반대입니다).
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3">
main
</div>
<div class="col-md-3 col-md-pull-9">
sidebar
</div>
</div>
</div>
부트 스트랩 3 : http://www.codeply.com/go/wgzJXs3gel
@emre는 " 작은 화면에서는 열 순서를 변경할 수 없지만 큰 화면에서는 열 순서를 변경할 수 있습니다 "라고 말했습니다. 그러나 이것은 부트 스트랩 3에서 " 전각 "스택 된 "열의 순서를 변경할 수 없습니다."라고 명시해야합니다 .
여기에 대한 답변은 2 셀에 대해서만 작동하지만 해당 열에 더 많은 열이 있으면 더 복잡해질 수 있습니다. 여러 열의 셀 수에 대한 일반화 된 솔루션을 찾았습니다.
목표
태블릿 / 데스크톱에서 디자인이 요구하는 순서에 따라 모바일에서 일련의 태그를 가져옵니다. 이 구체적인 예에서, 하나의 태그는 평소보다 빨리 흐름에 들어가고 다른 태그는 평소보다 늦게 흐름에 들어가야합니다.
변하기 쉬운
[1 headline]
[2 image]
[3 qty]
[4 caption]
[5 desc]
태블릿 +
[2 image ][1 headline]
[ ][3 qty ]
[ ][5 desc ]
[4 caption][ ]
[ ][ ]
따라서 헤드 라인은 tablet +에서 바로 뒤섞여 야하며 기술적으로는 desc도 셔플해야합니다. 모바일에서는 광고 제목 앞에있는 캡션 태그 위에 있습니다. 당신은 순간에 4 캡션도 문제가 있음을 알 수 있습니다.
모든 셀의 높이가 다를 수 있고 다음 셀과 함께 위에서 아래로 플러시되어야한다고 가정 해 봅시다 (테이블과 같이 약한 트릭을 배제 함).
모든 부트 스트랩 그리드 문제와 마찬가지로 1 단계는 HTML이 페이지에서 모바일 순서 (1 2 3 4 5) 여야한다는 것을 인식하는 것입니다. 그런 다음 자바 스크립트없이 이상적인 방식으로 태블릿 / 데스크톱을 이러한 방식으로 재배 열하는 방법을 결정하십시오.
이 솔루션 얻을 1 headline과 3 qty오른쪽이 아닌 왼쪽에 앉아 단순히 그들 모두를 설정하는 것입니다 pull-right. 이것은 CSS를 적용합니다 float: right. 즉, 오른쪽에 맞는 첫 번째 열린 공간을 찾습니다. 브라우저의 CSS 프로세서는 다음 순서대로 작동한다고 생각할 수 있습니다. 1은 오른쪽 상단에 맞습니다. 2는 다음이며 규칙 ( float: left)이므로 왼쪽 상단으로 이동합니다. 그런 다음 3은 float: right1 아래로 도약합니다.
그러나이 솔루션으로는 충분하지 않았습니다 4 caption. 오른쪽 2 개의 셀이 2 image왼쪽에 너무 짧아서 두 셀이 결합 된 것보다 더 길기 때문입니다. 부트 스트랩 그리드는 영광스러운 플로트 핵 4 caption입니다 float: left. 함께 2 image왼쪽에 너무 많은 공간을 차지 4 caption시도는 다음 사용 가능한 공간에 맞게 - 자주 오른쪽 열이 아니라 우리가 원하는 왼쪽.
여기에 (그리고 더 일반적으로 이와 같은 문제에 대한) 해결책은 모바일에 숨겨진 해킹 태그를 추가하여 태블릿 +에 존재하여 캡션을 밀어 내고 음수 여백으로 덮여있는 것입니다.
[2 image ][1 headline]
[ ][3 qty ]
[ ][4 hack ]
[5 caption][6 desc ^^^]
[ ][ ]
http://jsfiddle.net/b9chris/52VtD/16633/
HTML :
<div id=headline class="col-xs-12 col-sm-6 pull-right">Product Headline</div>
<div id=image class="col-xs-12 col-sm-6">Product Image</div>
<div id=qty class="col-xs-12 col-sm-6 pull-right">Qty, Add to cart</div>
<div id=hack class="hidden-xs col-sm-6">Hack</div>
<div id=caption class="col-xs-12 col-sm-6">Product image caption</div>
<div id=desc class="col-xs-12 col-sm-6 pull-right">Product description</div>
CSS :
#hack { height: 50px; }
@media (min-width: @screen-sm) {
#desc { margin-top: -50px; }
}
따라서 여기서 일반적인 솔루션은 모바일에서 사라질 수있는 해킹 태그를 추가하는 것입니다. tablet +에서 해킹 태그를 사용하면 표시된 태그가 흐름의 초기 또는 이후에 나타나고 위 또는 아래로 당겨 해킹 태그를 덮을 수 있습니다.
참고 : 링크 된 jsfiddle에서 간단한 예제를 위해 고정 높이를 사용했지만 실제로 작업 한 실제 사이트 내용은 5 가지 태그의 높이가 다릅니다. 태그 높이, 특히 이미지 및 디스크의 상대적으로 큰 차이로 올바르게 렌더링됩니다.
참고 2 : 레이아웃에 따라 tablet + (또는 더 큰 해상도)에서 일관된 충분한 열 순서를 가질 수 margin-bottom있으므로 다음과 같이 대신 해킹 태그를 사용 하지 않아도됩니다.
참고 3 : 이것은 부트 스트랩 3을 사용합니다. 부트 스트랩 4는 다른 그리드 세트를 사용하므로이 예제에서는 작동하지 않습니다.
http://jsfiddle.net/b9chris/52VtD/16632/
2017 년 10 월
다른 Bootstrap 4 솔루션을 추가하고 싶습니다. 나를 위해 일한 것.
미디어 쿼리와 결합 된 CSS "주문"속성을 사용하면 열이 작은 화면에 쌓일 때 열 순서를 바꿀 수 있습니다.
이 같은:
@media only screen and (max-width: 768px) {
#first {
order: 2;
}
#second {
order: 4;
}
#third {
order: 1;
}
#fourth {
order: 3;
}
}
코드 펜 링크 : https://codepen.io/preston206/pen/EwrXqm
화면 크기를 조정하면 열이 다른 순서로 쌓이는 것을 볼 수 있습니다.
나는 이것을 원래 포스터의 질문과 묶을 것입니다. CSS를 사용하면 탐색 모음, 사이드 바 및 내용을 대상으로 지정한 다음 미디어 쿼리 내에 속성을 적용 할 수 있습니다.
에서 부트 스트랩 4 , 당신은 이런 식으로 뭔가를 수행하려는 경우 :
Mobile | Desktop
-----------------------------
A | A
C | B C
B | D
D |
B 의 순서를 반대로 한 다음 C 를 적용한 다음 B에 적용해야 order-{breakpoint}-first합니다 . 그리고 두 개의 다른 설정을 적용하십시오. 하나는 동일한 열을 공유하고 다른 하나는 12 열의 전체 너비를 갖습니다.
작은 화면 : 12 열은 B , 12 열은 C
더 큰 화면 : 합계 사이에 12 열 ( B + C = 12)
이렇게
<div class='row no-gutters'>
<div class='col-12'>
A
</div>
<div class='col-12'>
<div class='row no-gutters'>
<div class='col-12 col-md-6'>
C
</div>
<div class='col-12 col-md-6 order-md-first'>
B
</div>
</div>
</div>
<div class='col-12'>
D
</div>
</div>
데모 : https://codepen.io/anon/pen/wXLGKa
모바일 버전부터 시작하여 대부분 원하는 시간을 달성 할 수 있습니다.
예를 들면 다음과 같습니다.
http://jsbin.com/wulexiq/edit?html,css,output
<div class="container">
<h1>PUSH - PULL Bootstrap demo</h1>
<h2>Version 1:</h2>
<div class="row">
<div class="col-xs-12 col-sm-5 col-sm-push-3 green">
IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
<hr> TOP ROW XS-SMALL SCREEN
</div>
<div class="col-xs-12 col-sm-4 col-sm-push-3 gold">
TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
<hr> MIDDLE ROW ON XS-SMALL
</div>
<div class="col-xs-12 col-sm-3 col-sm-pull-9 red">
TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
<hr> BOTTOM ROW ON XS-SMALL
</div>
</div>
<h2>Version 2:</h2>
<div class="row">
<div class="col-xs-12 col-sm-4 col-sm-push-8 yellow">
TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
<hr> TOP ROW ON XS-SMALL
</div>
<div class="col-xs-12 col-sm-4 col-sm-pull-4 blue">
TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
<hr> MIDDLE ROW XS-SMALL SCREEN
</div>
<div class="col-xs-12 col-sm-4 col-sm-pull-4 pink">
IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
<hr> BOTTOM ROW ON XS-SMALL
</div>
</div>
<h2>Version 3:</h2>
<div class="row">
<div class="col-xs-12 col-sm-5 cyan">
TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN TOP ROW ON XS-SMALL
</div>
<div class="col-xs-12 col-sm-3 col-sm-push-4 orange">
TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
<hr> MIDDLE ROW ON XS-SMALL
</div>
<div class="col-xs-12 col-sm-4 col-sm-pull-3 brown">
IN THE MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
<hr> BOTTOM ROW XS-SMALL SCREEN
</div>
</div>
<h2>Version 4:</h2>
<div class="row">
<div class="col-xs-12 col-sm-4 col-sm-push-8 darkblue">
TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
<hr> TOP ROW XS-SMALL SCREEN
</div>
<div class="col-xs-12 col-sm-4 beige">
MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
<hr> MIDDLE ROW ON XS-SMALL
</div>
<div class="col-xs-12 col-sm-4 col-sm-pull-8 silver">
TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
<hr> BOTTOM ROW ON XS-SMALL
</div>
</div>
</div>
insertAfter () 또는 insertBefore ()를 사용하여 jQuery를 사용하면 매우 쉽습니다.
<div class="left">content</div> <div class="right">sidebar</div>
<script>
$('.right').insertBefore('left');
</script>그 간단한
모바일 장치에 대해 o 조건을 설정하려면 다음과 같이 만들 수 있습니다
<script>
var $iW = $(window).innerWidth();
if ($iW < 992){
$('.right').insertBefore('.left');
}else{
$('.right').insertAfter('.left');
}
</script>예 https://jsfiddle.net/w9n27k23/
'Programing' 카테고리의 다른 글
| 더블 클릭 후 텍스트 선택 방지 (0) | 2020.03.26 |
|---|---|
| 여러 파일에서 문자열을 검색하고 Powershell에서 파일 이름을 반환하는 방법은 무엇입니까? (0) | 2020.03.26 |
| 변수 값에서 팬더 DataFrame을 생성하면 "ValueError : 모든 스칼라 값을 사용하는 경우 인덱스를 전달해야합니다"가 발생합니다. (0) | 2020.03.26 |
| CSS를 포함하는 가장 좋은 방법은? (0) | 2020.03.26 |
| JavaScript에서 배열을 함수 매개 변수로 전달 (0) | 2020.03.26 |