代码之家 › 专栏 › 技术社区 › Greg Lowe

启动引导SB Admin滚动导航栏项目

themes twitter-bootstrap css html

0

Greg Lowe · 技术社区 · 8 年前

对于那些对导航栏不滚动有问题的人( https://startbootstrap.com/template-overviews/sb-admin/ )。也许有更好的方法可以做到这一点,但我通过在css文件中添加以下内容来修复它。

.navbar-sidenav {
    overflow-y: auto !important;
    -ms-overflow-style: none !important;
}
.navbar-sidenav::-webkit-scrollbar {
    width: 0px !important;
    display: none !important;
}

祝你好运格雷格

1 回复 | 直到 8 年前

1

Greg Lowe 8 年前

花了一段时间才弄明白。上面的代码允许滚动,但溢出会弄乱工具提示。必须修改其他一些东西才能正常工作。在下面添加额外的css代码,更改下面的javascript函数,并像下面的代码一样将类添加到html文件中。希望这对其他人有帮助。。。

CSS

.sidenav-not-toggled {
    overflow-x: auto !important;
}
.navbar-sidenav {
    -ms-overflow-style: none !important;
}
.navbar-sidenav::-webkit-scrollbar {
    width: 0px !important;
    display: none !important;
}

JavaScript

// Toggle the side navigation
$("#sidenavToggler").click(function(e) {
    e.preventDefault();
    $("body").toggleClass("sidenav-toggled");
    $(".navbar-sidenav").toggleClass("sidenav-not-toggled");
    $(".navbar-sidenav .nav-link-collapse").addClass("collapsed");
    $(".navbar-sidenav .nav-link-collapseLink").addClass("collapsed");
    $(".navbar-sidenav .sidenav-second-level, .navbar-sidenav .sidenav-third-level").removeClass("show");
});

HTML

<ul class="navbar-nav navbar-sidenav sidenav-not-toggled" id="dashboardAccordion">