jquery - 如何覆盖 Bootstrap 默认的 767px 以显示我的菜单？

Question

我正在使用 Bootstrap 3.3.7。默认情况下，直到屏幕宽度达到 767px 才会显示汉堡包菜单。我需要让类似的行为尽快发生。

出于我的目的，以下 css 将给我显示汉堡菜单的初始结果:

@media (max-width: 1197px) {    
.navbar-header {
    float: none;
    margin-bottom: -16px;
}

.container-fluid {
    padding-right : 0px;
}

.navbar-toggle {
    display: block;
}

.navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

.navbar-brand {
    width:auto;
}

.navbar-collapse.collapse {
    display: none !important;
}

.navbar-nav {
    float: none !important;
    margin: -1px -15px !important;
    margin-bottom: -15px !important;
}

.navbar-nav > li {
    float: none;
}

.navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
}
}

但我现在遇到的问题是，当我按下“汉堡包”按钮以显示菜单时。它会显示一瞬间然后消失。

当我以我希望看到菜单的方式切换汉堡包时，我的类 navbar-collapse 的 div 元素具有预期的折叠类和“in”附加但显示已设置为“无”而不是当我通过 chrome 调试时“阻止”。可以看到bootstrap.css已经设置了显示。 我已经尝试在 bootstrap 'shown.bs.collapse' 事件中设置显示样式，我可以在调试我的代码时看到，但 bootstrap.css 仍然覆盖它，即使我将 '!important' 附加到显示。我错过了进一步的事件吗？

Answer 1

你必须为此编写一个特定的媒体查询，从你的问题来看，低于 768px，导航栏会折叠，所以应用它高于 768px 和低于 1000px，就像这样:

    @media (min-width: 768px) and (max-width: 1000px) {
       .collapse {
           display: none !important;
       }
    }

这将隐藏导航栏折叠，直到默认出现 Bootstrap 单元。当 collapse 类翻转时，导航栏 collapse 内的内部 Assets 将自动隐藏，同样你必须根据需要的设计设置你的 css。