부트 스트랩이 두 열의 왼쪽 열을 토글합니다.

Question

부트 스트랩 3.x를 사용하여 중간 페이지 내용을위한 두 열의 행을 만들고 싶습니다. 나는 오프 캐 노바를 시도했지만 질문에 대답이 없으면 내 생각에 예상대로 작동하지 않았다 here. 여기

내가

JS Fiddle 내가 왼쪽 열은 MD 정상 표시하고, 상기 다음 숨기 XS 및 SM 디바이스상의 토글 버튼 및 열 토글 표시 보여 폭 애니메이션을 적용해야 할 것이다 좋은 칼럼 푸시 풀.

HTML

<div class="container-fluid"> 
<div class="row-fluid"> 
    <div id="col1" class="col-xs-3">Left Col</div> 
    <div id="col2" class="col-xs-9"> 
     Right Col 
     <a id="trig" class="btn btn-inverse">Reflow Me</a> 
    </div> 

    </div> 
</div> 

CSS는

.row-fluid div { 
    height: 200px; 
    -webkit-transition: width 0.3s ease, margin 0.3s ease; 
    -moz-transition: width 0.3s ease, margin 0.3s ease; 
    -o-transition: width 0.3s ease, margin 0.3s ease; 
    transition: width 0.3s ease, margin 0.3s ease; 
} 

.row-fluid .col-0 { 
    width: 0%; 

} 

#col1 { 
    background-color: #A6BFBA; 
} 

#col2 { 
    background-color: #DE4124; 
} 

#trig { 
    margin: 50px; 
} 

.row-fluid .col-0 + [class*="span"]{ 
    margin-left: 0; 
} 

JS

$('#trig').on('click', function() { 
    $('#col1').toggleClass('col-0 col-xs-3'); 
    $('#col2').toggleClass('col-xs-12 col-xs-9'); 
}); 

Answer 1

여기에 몇 가지 문제처럼 보인다. 첫째, 기존 코드를 사용하고 있습니다. "span"이있는 것은 오래된 부트 스트랩 2 코드입니다. 둘째, 패딩을 전환해야합니다. 덧붙임 패딩을 사용하지 않으면, 그것은 추한 것과 같은 종류의 점프가됩니다. 마지막으로 일반 열과 같이 col-0을 플로팅해야합니다.

업데이트 CSS 아래 데모 :

.row-fluid div { 
    height: 200px; 
    -webkit-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease; 
    -moz-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease; 
    -o-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease; 
    transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease; 
} 

.row-fluid .col-0 { 
    width: 0%; 
    float:left; 
} 

... 

.row-fluid .col-0 + [class*="col"]{ 
    margin-left: 0; 
} 

http://fiddle.jshell.net/fv2jvbgL/