부트 스트랩 응답 그리드 레이아웃

Question

이이 가로 모드에서 잘 작동

<div class="row-fluid"> 
    <div class="span4">Col4</div> 
    <div class="span8">Col8</div> 
</div> 

유체 레이아웃 부트 스트랩 트위터를 사용하여 코딩 내 마크 업입니다. 그러나 초상화에서 나는 격자를 바꾸고 싶다. 예 : 첫 번째 div는 2 개의 열을 차지하고 두 번째 div는 10 개의 열을 차지해야합니다. {.span4;}

<div class="row-fluid"> 
    <div class="span2">Col2</div> 
    <div class="span10">Col10</div> 
</div> 

나는 셀에만-콜 럼으로 새로운 클래스를 정의하는 생각 정상 적은 파일과 미디어에게 질의 방향을 사용하여 : 세로 셀에만 열 덮어 {.span2를;}. 하지만 컴파일 오류가 적어지고 있습니다.

이 내가이를 수있는 방법이 있나요

<div class="row-fluid"> 
    <div class="row-column">Col2</div> 
    <div class="span10">Col10</div> 
</div> 

을하고 생각 무엇인가?

Answer 1

당신은/덜 작업을 취득 할 해달라고 할 수없는 경우, 당신은 항상 크기 조정 이벤트를보고 다시 떨어질 수 :

$(window).resize(function() { 
    if ($(window).width() < 640) { 
     $("#col1").removeClass("span4").addClass("span2"); 
     $("#col2").removeClass("span8").addClass("span10"); 
    } else { 
     $("#col1").removeClass("span2").addClass("span4"); 
     $("#col2").removeClass("span10").addClass("span8"); 
    } 
});