化妝DIV摺疊時崩潰插件屏幕尺寸的變化 - 引導

Question

我有這樣的代碼：

<input value="+" class="btn btn_continents" type="button" data-toggle="collapse" 
               data-target="#collapseContinents" aria-expanded="false" aria-controls="collapseContinents" /> 
<div id="collapseContinents" class="collapse in" > 
Content...                     
</div> 

而且它工作正常，如果有人點擊該按鈕的內容顯示和隱藏，但問題是當我想在默認情況下可摺疊內容皮當屏幕尺寸較小

#collapseContinents{ 
    //display: block; 
    .show(); 
    @media screen and (max-width :@screen-xs-max) { . 
     //display:none;   
     .hidden();   
    } 

} 

當我再補充一點的CSS（我用以下）和屏幕較小的collapsive插件不工作了。我能做什麼？。謝謝。

Answer 1

，如果你使用的崩潰插件，因爲此插件管理的開/關通過在JavaScript中添加in類，否則不能用更少做到這一點：

// From Boostrap CSS file: 
.collapse { 
    display: none; 
} 
.collapse.in { 
    display: block; 
} 

所以，你將有插件，你的CSS之間的衝突在小屏幕上。

你可以做到這一點在Javascript：檢測屏幕的大小，並添加/刪除in類：

// Add "in" class if window width > 1024px, remove it if <= 1024 
$('#collapseContinents').toggleClass('in', $(window).width() > 1024);