Question

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

第二个问题围绕窗口大小更改时折叠导航栏。我设置的方式是，当屏幕尺寸小于1200像素时，整个导航栏应该会折叠，单击折叠可以将导航栏扩展到85vh的高度。虽然导航栏在1200px处崩溃，但是在达到默认值767px之前，折叠不会延伸到85vh的高度。我的代码如下所示：

@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 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。

Bootstrap Navbar Dropdown并不总是打开

1 个答案: