Question

对于那些导航条不能滚动的人（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;
}

祝你好运，格雷格

Answer 1

花了一段时间来解决这个问题。上面的代码允许滚动，但溢出混乱了工具提示。不得不修改一些其他的东西，使其工作。添加下面的额外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">

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

1 个答案: