부트 스트랩의 열 흐름

Question

더 작은 브라우저를 처리하기 위해보다 반응이 빠른 양식을 만들려고합니다. 현재 우리는 레이아웃을 돕기 위해 부트 스트랩을 사용하고 있지만 다른 대체 솔루션에는 반대하지 않습니다. 이 특정보기에는 다양한 양의 데이터가 포함 된 두 개의 열이 있습니다. 트릭은 오른쪽 상단의 그룹이 우리가 한 열 또는 두 개를 렌더링하는지 여부에 관계없이 페이지 상단에 머물러 있어야한다는 것입니다. 오른쪽 상단 섹션 아래의 그룹은 왼쪽 열의 모든 그룹 아래로 흐르게됩니다. 여기에 우리가 달성하려고하는 것에 대한 그림이다 :

2 열 :

L1 R1 
L2 R2 
L3 

1 열 : 부트 스트랩을 사용하여

R1 
L1 
L2 
L3 
R2 

, 내가 숙박하는 R1을 얻을 수 있어요 col-pull/col-push를 사용하여 위쪽을 표시하지만 왼쪽 열의 모든 값이 렌더링 된 후 R1 흐름 아래의 오른쪽 열 값이 렌더링되므로 결과는 다음과 같습니다.

L1 R1 
L2 
L3 
     R2 

여기까지 제가 시도한 마크 업입니다. http://jsfiddle.net/jimwooley/g8r35/에서 라이브 샘플이 필요한 사람들을위한 jsfiddle도 게시했습니다.

<div class="row row-fluid"> 
    <div class="col-sm-7 col-sm-push-5 col-xs-12">R1</div> 
    <div class="col-sm-5 col-sm-pull-7 col-xs-12">L1<br /> 
     L2<br /> 
     L3</div> 
    <div class="col-sm-5 col-sm-push-5 col-xs-12">R2<br /> 
     R3</div> 
</div> 

참고 : 섹션의 hights이 달라, 그래서 두 바로 아래 또는이 둘 사이에 절반 방법을 떨어질 수 있기 때문에 라인이 왼쪽 옆 라인 흐를 수 없습니다. 또한 결과가 IE8에서 작동해야하기 때문에 여기서 열을 사용할 수 없습니다.

Answer 1

12가 아닌 6 열로 설정 하시겠습니까? 부트 스트랩은 페이지에서 12를 찾습니까? 따라서 6 또는 3의 호출에는 단일 열이 표시되어야합니다. (이 예에서는 태블릿 또는 모바일). 전체 화면에는 2 개의 열이 표시됩니다.

나는 오해 할 수 있습니다.

Answer 2

복제가 좋은 것은 아니라고 인정하지만 부트 스트랩의 hidden- * 및 visible- * 클래스 사용에 성공했습니다.

<div class="row row-fluid"> 
    <div class="col-sm-7 col-sm-push-5 col-xs-12"> 
     <div> 
      Upper Right<br /> 
      line 1<br /> 
     </div> 
     <div class="hidden-xs" >Below Right<br /> 
      line 1<br /> 
     </div> 
    </div> 
    <div class="col-sm-5 col-sm-pull-7 col-xs-12">Upper Left<br /> 
     line 1<br /> 
     line 1<br /> 
     line 1<br /> 
     line 1<br /> 
     line 1<br /> 
    </div> 
    <div class="visible-xs"> 
     Below Right<br /> 
     line 1<br /> 
    </div> 
</div> 

여기를 참조하십시오 : http://jsfiddle.net/darronj/t8nYn/

Answer 3

왜 R1 그냥 오른쪽을 밀어 열이 주위에 포장 할 수있다? 그렇게하면 항상 최상위에있게됩니다. 먼저해야 할 것입니다.