是否有可能在引導程序中執行部分摺疊側邊欄

Question

我正在嘗試構建Bootstrap頁面，該頁面將有一個部分在滾動上摺疊的側邊欄...它應該摺疊爲較窄版本的本身（例如圖標而不是文本樣式），並且這種崩潰將發生在滾動上，然後可以通過單擊一個元素打開到全角。

我的問題是，我無法弄清楚如何在考慮bootstrap的情況下完成這項工作，因爲對於寬屏幕，側邊欄需要固定在最左側（或右側）......即不是boostrap部分的一部分......而對於平板視圖，例如我假設側邊欄需要佔用一列或多列（否則我需要調整整個頁面上的主體填充），我可以做但我希望有一些經過試驗和測試的方法。我確信我已經見過這種技術，但我找不到它的一個例子。有誰知道如何解決這個問題，或者是否有可能。

Answer 1

HTML：

<div id="wrapper"> 
    <div id="sidebar"> 
    ..... 
    </div> 
</div> 

JS：

$(window).scroll(function() { 
    $("#wrapper").toggleClass("active"); 
}); 

CSS：

#sidebar{ 
    position: fixed; 
    left: 0; 
    width: 200px; 
} 
#wrapper.active #sidebar{ 
    width: 100px; 
} 

這將切換側邊欄上的窗口滾動寬度。您還可以將窗口滾動的功能添加到側欄鼠標點擊事件偵聽器。