如何在流暢的 Twitter Bootstrap 2.0 版面中建立固定側邊欄導覽？

在流體Twitter Bootstrap 2.0 中建立固定側邊欄導航

在流體Bootstrap 2.0 佈局中，在滾動時保持固定側邊欄位導航可以是實現了。操作方法如下：

1. 建立自訂側邊欄類：
   為固定側邊欄定義 CSS 類，例如 .sidebar-nav-fixed。為其指派屬性，如位置：固定、頂部和寬度。
2. 建立偏移內容類：
   要補償固定側邊欄所建立的左邊距，請新增偏移類別到內容分割區。例如，.row-fluid > .span-fixed-sidebar 可以有等於固定側邊欄寬度的 margin-left 屬性。

3. 更新的CSS：

   .sidebar-nav-fixed {
       padding: 9px 0;
       position: fixed;
       left: 20px;
       top: 60px;
       width: 250px;
   }
   
   .row-fluid > .span-fixed-sidebar {
       margin-left: 290px;
   }

4. 響應式修改：
   

   @media (max-width: 979px) {
       .sidebar-nav-fixed {
           position: static;
           width: auto;
       }
   }

5. 移動視圖的附加方法：

   要保持固定側邊欄直到它在小螢幕上變為靜態，請將CSS 調整為如下：
   

   @media (max-width: 767px) {
       .sidebar-nav-fixed {
           position: static;
           width: auto;
       }
   }

注意：

對於2.0.4 之後的Bootstrap 版本，請考慮使用Affix jQuery 插件，它提供類似的功能。

以上是如何在流暢的 Twitter Bootstrap 2.0 版面中建立固定側邊欄導覽？的詳細內容。更多資訊請關注PHP中文網其他相關文章！