Question

我正在使用引导程序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项目具有预期的崩溃类别，并且附加了“输入”，但是显示设置为“无”通过Chrome调试时“阻塞”。我可以看到显示是由bootstrap.css设置的。我尝试在bootstrap'shown.bs.collapse'事件中设置显示样式，并且可以看到在调试代码时已命中，但是即使将'！important'附加到显示器上，bootstrap.css仍然会覆盖此样式。我错过了进一步的活动吗？

Answer 1

您必须为此编写一个特定的媒体查询，从您的问题开始，在768px以下，导航栏将折叠，因此将其应用于768px以上和1000px以下，就像这样：

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

这将隐藏导航栏折叠，直到默认出现引导单元。当折叠类翻转时，导航栏内部的内部资产将自动隐藏，就像明智的做法一样，您必须根据需要设置css。

如何覆盖引导程序默认值767px来显示菜单？

1 个答案: