html - Bootstrap Navbar 下拉菜单并不总是打开

Question

我在使用 Bootstrap 的导航栏下拉菜单时遇到了两个问题。首先，导航栏的下拉菜单在每个页面上都不起作用。 Navbar 的外观如下所示。 日历是嵌入到页面中的 Google 日历。每当我单击日历链接本身时，下拉菜单都不起作用。如果我在单击日历页面后尝试导航到另一个页面，下拉菜单也不起作用。但是，如果我导航到另一个页面然后重新加载该页面，下拉菜单将再次起作用。知道可能导致此问题的原因吗？

第二个问题围绕着当窗口大小改变时折叠导航栏。按照我设置的方式，当屏幕尺寸小于 1200 像素时，整个导航栏应该折叠，单击可折叠按钮应该将导航栏扩展到 85vh 的高度。虽然导航栏确实在 1200 像素处折叠，但可折叠不会延伸到 85vh 的高度，直到达到默认值 767 像素。我的代码如下所示:

@media screen and (max-width: 1200px) {
    .navbar-collapse .nav > .divider-vertical {
        display: none;
    }
    #nav-portallinks {
        li a {
            color: white;
        }
        li a:hover {
            color: black;
        }
        .divider {
            width: 25vw;
            margin-left: 0;
        }
        font: {
            family: $font-text;
            size: 2vw;
        }
        max-height: 85vh;
        overflow: auto;
        background-color: $cardinal;
        width: 25vw;
        margin-left: 50vw;
    }
}

有什么想法吗？

Answer 1

关于无响应的下拉菜单，您可能在日历和 Bootstrap 的行为之间存在一些冲突，也许将问题隔离在 fiddle 中或共享一些代码将有助于识别它。

对于 bootstrap 3.3.x，这里是您需要在 1200px 上切换折叠的 CSS:

@media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}

See working example

另一种选择是将变量 $grid-float-breakpoint: 更改为 $screen-lg-min !default;(即 1200px) 并通过 SASS 重新编译，默认为 768px。