首页 文章

如何覆盖bootstraps默认的767px来显示我的菜单？

提问于
浏览 次
0

我正在使用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;
}
}

我现在的问题是当我按下'汉堡包'按钮显示菜单时 . 它会瞬间显示，然后消失 .

当我以我希望看到菜单的方式切换汉堡包时，我的div项目与navbar-collapse类具有预期的崩溃类别和'in'附加但显示已设置为'none'而不是'block' '当我通过chrome调试时 . 我可以看到显示已由bootstrap.css设置 . 我已经尝试在bootstrap'lovest.bs.collapse'事件中设置显示样式，我可以看到调试我的代码时，但是bootstrap.css仍然会覆盖它，即使我将'！important'附加到显示器上也是如此 . 我错过了另一个活动吗？

jquery css twitter-bootstrap

1 回答

  • 0

    您必须为此编写特定的媒体查询，从您的问题，低于768px，导航栏将崩溃，因此将其应用于768px以上且低于1000px，就像这样：

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

    这将隐藏导航栏折叠，直到默认出现引导程序单元 . 当崩溃类翻转时，导航栏内部的内部资产将自动隐藏，就像你必须按照你想要的设计设置你的css一样 .

    回复于

相关问题