Question

我已设置自定义

我设置了一个新的断点，以便移动菜单显示为1200px，并带有以下css：

@media (max-width: 1200px) {
.navbar-header {
    float: none;
}
.navbar-toggle {
    display: block;
}
.navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar-collapse.collapse {
    display: none!important;
}
.navbar-nav {
    float: none!important;
    margin: 7.5px -15px;
}
.navbar-nav>li {
    float: none;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}
}

问题在于，当我到达那个断点时，移动菜单总是会崩溃而且永远不会显示，

这是标记：

<nav class="navbar navbar-inverse a-1-navbar a-1-navbar-shadow" role="navigation" id="a-1-main-menu">
<div class="container">
    <div class="navbar-header a-1-navbar-header">

        <button type="button" class="navbar-toggle a-mobile-toggle" data-toggle="collapse" data-target="#a-menu"  style="float:left;">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

        <a class="navbar-brand a-1-logo-wrapper" href="#" style="float:right;">
            <img class="hidden-xs a-1-logo" src="life.png"   alt="">
            <img class="visible-xs a-1-logo" src="life.png"  alt="">
        </a>

    </div>

    <div class="collapse navbar-collapse" id="a-menu" >
        <ul class="nav navbar-nav navbar-right a-menu-bar">
            <li class="active"><a href="#" class="a-1-menu-item" data-submenu="Vehicles"> Vehicles  <span class="glyphicon glyphicon-chevron-down"></span></a></li>
            <li><a href="#" class="a-1-menu-item" data-submenu="Specials">       Specials <span class="glyphicon glyphicon-chevron-down"></span></a></li>
            <li><a href="#" class="a-1-menu-item" data-submenu="Finance">       Finance & Insurance <span class="glyphicon glyphicon-chevron-down"></span></a></li>
            <li><a href="#" class="a-1-menu-item" data-submenu="Servicing">       Servicing <span class="glyphicon glyphicon-chevron-down"></span></a></li>
            <li><a href="#" class="a-1-menu-item" data-submenu="Parts">       Parts <span class="glyphicon glyphicon-chevron-down"></span></a></li>
            <li><a href="#" class="a-1-menu-item" data-submenu="Contact">       Contact <span class="glyphicon glyphicon-chevron-down"></span></a></li>
        </ul>
    </div>
</div>

是否需要一些自定义JavaScript？

Answer 1

我已经测试了您的代码，并且在显示折叠的项目时没有问题。也许您应该先检查以下事项：

你是否包含jQuery？
您是否包含Bootstrap3 js资源？
您是否在Bootstrap3 js资源中包含collapse plugin？

对于Bootstrap3，您需要在css中添加更多行

虽然隐藏折叠项目没有问题，但在显示下拉列表时会出现问题。问题是你错过了这个：

.navbar-collapse.collapse.in { 
  display: block!important;
}

.collapsing {
  overflow: hidden!important;
}

以下是Codepen上的示例。

设置不同的Bootstrap菜单断点，但此断点上不显示菜单

1 个答案:

对于Bootstrap3，您需要在css中添加更多行