如何修复 Fluid Twitter Bootstrap 2.0 中的侧边栏导航？-css教程-PHP中文网

如何修复 Fluid Twitter Bootstrap 2.0 中的侧边栏导航？

Susan Sarandon

发布： 2024-11-11 16:01:02

原创

410 人浏览过

How to Fix the Sidebar Navigation in Fluid Twitter Bootstrap 2.0?

修复流体 Twitter Bootstrap 2.0 中的侧边栏导航

在流体布局中滚动时实现保持静止的侧边栏导航非常简单。

实现

CSS

定义一个新的 sidebar-nav-fixed 类来修复你的侧边栏，并向你的内容 div 添加一个偏移类以补偿左边距：

.sidebar-nav-fixed {
    position: fixed;
    left: 20px;
    top: 60px;
    width: 250px;
}

.row-fluid > .span-fixed-sidebar {
    margin-left: 290px;
}

登录后复制

更新选项

为了响应式兼容性，请考虑以下 CSS：

.sidebar-nav-fixed {
    position: fixed;
    top: 60px;
    width: 21.97%;
}

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

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

登录后复制

HTML

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span3">
            <div class="well sidebar-nav sidebar-nav-fixed">
                ...
            </div><!--/.well -->
        </div><!--/span-->
        <div class="span9">
            ...
        </div><!--/span-->
    </div><!--/row-->
</div><!--/.fluid-container-->

登录后复制

请注意，有一个较小的宽度固定侧边栏的差异，因为它没有继承容器 div 的宽度。

替代方法

要保持侧边栏固定，直到移动视图的网格下降，请使用以下 CSS：

.sidebar-nav-fixed {
    position: fixed;
    top: 60px;
    width: 21.97%;
}

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

@media (max-width: 979px) {
    .sidebar-nav-fixed {
        top: 70px;
    }
}

登录后复制

以上是如何修复 Fluid Twitter Bootstrap 2.0 中的侧边栏导航？的详细内容。更多信息请关注PHP中文网其他相关文章！