Twitter Bootstrap 3에서 col-lg-push 및 col-lg-pull을 사용한 열 순서 조작
나는 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/
그것이 도움이되기를 바랍니다.
I just felt like I'll add my $0.2 to those 2 good answers. I had a case when I had to move the last column all the way to the top in a 3-column situation.
[A][B][C]
to
[C]
[A]
[B]
Boostrap's class .col-xx-push-Xdoes nothing else but pushes a column to the right with left: XX%; so all you have to do to push a column right is to add the number of pseudo columns going left.
In this case:
two columns (
col-md-5andcol-md-3) are going left, each with the value of the one that is going right;one(
col-md-4) is going right by the sum of the first two going left (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>
Misconception Common misconception with column ordering is that, I should (or could) do the pushing and pulling on mobile devices, and that the desktop views should render in the natural order of the markup. This is wrong.
Reality Bootstrap is a mobile first framework. This means that the order of the columns in your HTML markup should represent the order in which you want them displayed on mobile devices. This mean that the pushing and pulling is done on the larger desktop views. not on mobile devices view..
Brandon Schmalz - Full Stack Web Developer Have a look at full description here
If you need to organize data in columns of 1 / 2 / 4 depending of the viewport size then push and pull may be no option at all. No matter how you order your items in the first place, one of the sizes may give you a wrong order.
A solution in this case is to use nested rows and cols without any push or pull classes.
Example
In XS you want...
A
B
C
D
E
F
G
H
In SM you want...
A E
B F
C G
D H
In MD and above you want...
A C E G
B D F H
Solution
주변의 두 열 부모 요소에 중첩 된 두 열 자식 요소를 사용하십시오.
작동하는 스 니펫은 다음과 같습니다.
<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 생성에 좋습니다.
'IT' 카테고리의 다른 글
| 클래스 인스턴스를 JSON으로 직렬화 (0) | 2020.06.04 |
|---|---|
| IE에서 "테두리 반경"지원 (0) | 2020.06.04 |
| iOS 7에서만 실행할 때 Storyboard 프로토 타입 셀 (Xcode 6, iOS 8 SDK)의 UICollectionViewCell contentView 프레임 자동 크기 조정 문제가 발생합니다. (0) | 2020.06.04 |
| 클래스 접두사별로 CSS 선택기가 있습니까? (0) | 2020.06.04 |
| 앵귤러 2 호버 이벤트 (0) | 2020.06.04 |