Bootstrap在兩列列中切換左列

Question

我想使用Bootstrap 3.x爲中間頁面內容創建一列兩列。我嘗試了關閉canasa，但它沒有按照預期的方式工作，基於未回答問題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」的東西都是舊的Bootstrap 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/