[css] Twitter Bootstrap 3에서 col-lg-push 및 col-lg-pull을 사용한 열 순서 조작

Program / 글쓴이

나는 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 생성에 좋습니다.

답변