如何在流畅的 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中文网其他相关文章！