나는 Twitter Bootstrap 3에서 문서를 읽고 있는데이 페이지에 표시된 것처럼 열 순서를 따르려고했지만 벽에 부딪쳤다. 왜 그런 코드가 작동하는지 또는 설정을 올바르게 지정하는 방법을 이해하지 못합니다. 내가 보여주고 싶은 것은 길이 5와 길이 5로 구성된 하나의 그리드와 마지막으로 하나의 길이 2 그리드입니다.
그래서 내 것은 다음과 같습니다.
[5] [5] [2]
그리고 달성하려는 것은 위의 레이아웃을 데스크탑에서 볼 때 표시되지만 모바일에서 볼 때 두 번째 길이 5 객체를 먼저 표시 한 다음 첫 번째 길이 5 객체를 표시하고 마지막으로 길이 2 객체를 표시하고 싶습니다 세로로 이처럼 :
[5] (second)
[5] (first)
[2]
위의 문서에서 설명한 단계를 따르려고했지만 모바일 플랫폼에도 불구하고 두 번째 길이보다 첫 번째 길이 5 객체를 얻었습니다. 다시 말해, 나는 이것을 얻었다 :
[5] (first)
[5] (second)
[2]
어떻게 두 번째 것을 첫 번째에 올바르게 넣을 수 있습니까? 또는 동일한 길이의 객체를 사용하기 때문에 열 순서가 작동하지 않을 수 있습니까?
귀하의 정보에 대한 내 코드는 다음과 같습니다.
<div class='row'>
<div class='col-lg-5 col-lg-push-5'></div>
<div class='col-lg-5 col-lg-pull-5'></div>
<div class='col-lg-2'></div>
</div>
또한 설명서에는 무엇이 무엇 pull
인지 push
의미가 명확하지 않습니다 . 그래서 뭔가 빠졌습니까?
감사.
답변
이 답변은 세 부분으로되어 있습니다. 공식 릴리스 (v3 및 v4)는 아래를 참조하십시오.
다운로드 한 RC1의 원본 파일에서 col-lg-push-x를 찾거나 클래스를 가져올 수 없으므로 bootstrap.css 파일을 확인하십시오. 바라건대 이것은 RC2에서 정렬 할 것입니다.
어쨌든 col-push- * 및 pull 클래스가 존재했으며 이는 귀하의 요구에 적합합니다. 여기 데모가 있습니다
<div class="row">
<div class="col-sm-5 col-push-5">
Content B
</div>
<div class="col-sm-5 col-pull-5">
Content A
</div>
<div class="col-sm-2">
Content C
</div>
</div>
편집 : 아래 공식 릴리스 v3.0에 대한 답변입니다
주제에 대한이 블로그 게시물을 참조하십시오
-
col-vp-push-x
=만큼 우측 열을 밀어 X의 열은 일반적으로 렌더링 여기서부터 열 번호 ->position: relative
, A의 VP 이상 뷰 포트. -
col-vp-pull-x
= 의해 좌측 열을 끌어 X의 열은 일반적으로 렌더링 여기서부터 열 번호 ->position: relative
, A의 VP 이상 뷰 포트.vp = xs, sm, md 또는 lg
x = 1 ~ 12
대부분의 사람들을 혼란스럽게 생각하는 것은 HTML 마크 업의 열 순서를 변경해야한다는 것 (아래 예에서 B가 A 앞에옵니다) 이며 뷰 포트를 밀거나 당기는 것입니다 지정된 것 이상. 즉 col-sm-push-5
, sm
뷰포트 이상 에서 5 개의 열만 푸시 합니다. Bootstrap은 “모바일 우선”프레임 워크이므로 HTML은 사이트의 모바일 버전을 반영해야합니다. 그런 다음 더 큰 화면에서 밀기 및 당기기가 수행됩니다.
- (데스크톱) 더 큰 뷰포트가 밀리고 당겨집니다.
- (모바일) 작은 뷰포트는 정상적인 순서로 렌더링됩니다.
<div class="row">
<div class="col-sm-5 col-sm-push-5">
Content B
</div>
<div class="col-sm-5 col-sm-pull-5">
Content A
</div>
<div class="col-sm-2">
Content C
</div>
</div>
뷰포트> = sm
|A|B|C|
뷰포트 <sm
|B|
|A|
|C|
편집 : 아래는 v4.0의 답변입니다
v4에는 flexbox와 그리드 시스템에 대한 기타 변경 사항이 있으며 푸시 / 풀 클래스는 flexbox 순서를 사용하여 제거되었습니다.
.order-*
클래스를 사용 하여 시각적 순서를 제어 하십시오 (여기서 * = 1 ~ 12)- 그리드 계층에 따라 다를 수도 있습니다.
.order-md-*
- 또한
.order-first
(-1) 및.order-last
(13) 사용 가능
<div class="row">
<div class="col order-2">1st yet 2nd</div>
<div class="col order-1">2nd yet 1st</div>
</div>
답변
브라우저 왼쪽으로 div를 “풀”하고 브라우저 왼쪽에서 div를 “밀어냅니다”.
처럼:
따라서 기본적으로 모든 웹 페이지의 3 열 레이아웃에서 “본문”이 “중앙”에 나타나고 “모바일”보기에서 “본문”이 페이지의 “맨 위”에 나타납니다. 이것은 주로 3 열 레이아웃을 가진 모든 사람이 원합니다.
<div class="container">
<div class="row">
<div id="content" class="col-lg-4 col-lg-push-4 col-sm-12">
<h2>This is Content</h2>
<p>orem Ipsum ...</p>
</div>
<div id="sidebar-left" class="col-lg-4 col-sm-6 col-lg-pull-4">
<h2>This is Left Sidebar</h2>
<p>orem Ipsum...</p>
</div>
<div id="sidebar-right" class="col-lg-4 col-sm-6">
<h2>This is Right Sidebar</h2>
<p>orem Ipsum.... </p>
</div>
</div>
</div>
여기에서 볼 수 있습니다 : http://jsfiddle.net/DrGeneral/BxaNN/1/
그것이 도움이되기를 바랍니다.
답변
오해
열 순서에 대한 일반적인 오해는 모바일 장치를 밀고 당기는 것 (또는 가능)을 수행해야하며 데스크탑보기는 자연스럽게 마크 업 순서로 렌더링해야한다는 것입니다. 이것은 잘못이다.
Reality
Bootstrap은 모바일 우선 프레임 워크입니다. 즉, HTML 마크 업의 열 순서는 모바일 장치에 표시하려는 순서를 나타내야합니다. 이는 밀고 당기는 것이 더 큰 데스크탑보기에서 수행됨을 의미합니다. 휴대 기기에서 볼 수 없습니다 ..
Brandon Schmalz-전체 스택 웹 개발자
여기에서 전체 설명을보십시오
답변
나는 그 두 가지 좋은 답변에 0.2 달러를 더할 것 같았습니다. 3 열 상황에서 마지막 열을 맨 위로 이동 해야하는 경우가있었습니다.
[알파벳]
에
[씨]
[ㅏ]
[비]
Boostrap의 클래스 .col-xx-push-X
는 열을 오른쪽으로 밀어 넣는 것 외에는 아무것도하지 않으므로 열을 오른쪽으로 left: XX%;
밀어 넣으려면 왼쪽으로 이동하는 의사 열 수를 추가하면됩니다.
이 경우 :
-
두 개의 열 (
col-md-5
및col-md-3
)이 왼쪽으로 가고 있습니다. 각 열 은 오른쪽으로가는 값을 갖습니다. -
one (
col-md-4
)은 왼쪽으로가는 첫 두 개 (5 + 3 = 8)의 합으로 오른쪽으로 가고 있습니다.
<div class="row">
<div class="col-md-4 col-md-push-8 ">
C
</div>
<div class="col-md-5 col-md-pull-4">
A
</div>
<div class="col-md-3 col-md-pull-4">
B
</div>
</div>
답변
뷰포트 크기에 따라 1 / 2 / 4 열로 데이터를 구성해야하는 경우 밀고 당기는 옵션이 전혀 없을 수 있습니다. 처음 주문한 방법에 관계없이 크기 중 하나에 따라 잘못된 주문이 발생할 수 있습니다.
이 경우 해결책은 푸시 또는 풀 클래스없이 중첩 된 행과 열을 사용하는 것입니다.
예
XS에서 당신이 원하는 …
A
B
C
D
E
F
G
H
SM에서는 당신이 원하는 …
A E
B F
C G
D H
MD 이상에서는 당신이 원하는 …
A C E G
B D F H
해결책
주변의 두 열 부모 요소에 중첩 된 두 열 자식 요소를 사용하십시오.
작동하는 스 니펫은 다음과 같습니다.
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript" ></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-md-6"><p>A</p><p>B</p></div>
<div class="col-md-6"><p>C</p><p>D</p></div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-md-6"><p>E</p><p>F</p></div>
<div class="col-md-6"><p>G</p><p>H</p></div>
</div>
</div>
</div>
이 솔루션의 또 다른 장점은 항목이 자연 순서 (A, B, C, … H)로 코드에 표시되고 뒤섞 일 필요가 없어 CMS 생성에 좋습니다.