Bootstrap 导航栏下拉菜单并不总是打开答案

【问题标题】：Bootstrap Navbar Dropdown not always openingBootstrap 导航栏下拉菜单并不总是打开
【发布时间】：2016-11-27 23:40:52
【问题描述】：

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

第二个问题是当窗口大小改变时折叠导航栏。我设置的方式是，当屏幕尺寸小于 1200 像素时，整个导航栏应该折叠起来，单击折叠栏应该将导航栏扩展到 85vh 的高度。虽然导航栏确实在 1200 像素处折叠，但在达到默认值 767 像素之前，可折叠项不会扩展到 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;
    }
}

有什么想法吗？

【问题讨论】：

你能创建一个jsFiddle吗？

标签： html css twitter-bootstrap navbar dropdown

【解决方案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。

【讨论】：