Bootstrap-导航栏切换未显示答案

【问题标题】：Bootstrap- Navbar toggle are not showingBootstrap-导航栏切换未显示
【发布时间】：2017-11-16 20:49:08
【问题描述】：

我使用 Navbar-toggle 在移动设备上显示组菜单，但它不起作用！问题是什么？以下是我的代码和 JsFiddle。实际上当我给navbar-toggle上课时，按钮消失了！

HTML：

<nav class="navbar" role="navigation">
                <div class="navbar-header">
                    <button class="navbar-toggle" data-toggle="collapse" data-target="#menu">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <ul class="nav navbar-right navbar-nav navbar-collapse collapsed" id="menu">
                    <li class="active" id="home"><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Tel</a></li>
                </ul>
                <img id="logo" src="images/logo.png" class="img-responsive">
            </nav>

CSS：

.navbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f7f7f7;
    box-shadow: 0 4px 2px -2px #dedede;
}
.navbar-nav > li:first-child > a{
    background-color: #01a89e;
    color: white;
}
.navbar-nav > li:first-child a:hover, .navbar-nav > li:first-child a:active {
    background-color: #01a89e;
}
.navbar-nav li a:hover{
    background-color: #dedede;
}
.navbar-nav{
    margin-top: -1px;
}
.navbar-nav li:not(:first-child){
   border-left: 1px solid #dedede;
    margin-bottom: -3px;
}
.navbar-nav li:hover{
    /*border: none;*/
}
.navbar-nav li a{
    color: #606060;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: -3px;
}
#logo{
    width: 120px;
}

JsFiddle

【问题讨论】：

navbar-default is missing class on nav Element，添加显示按钮和切换，您可以覆盖默认颜色，查看JSFiddle
@JackRyder 非常感谢，但默认情况下，在移动设备大小下，菜单不会折叠，但是我将 collapsed 类赋予了 ul 标签。我该如何解决？
试试this，我把ul放到div中，给容器类“navbar-collapse collapse”，现在默认保持折叠状态
@JackRyder 非常感谢！

标签： html css twitter-bootstrap-3

【解决方案1】：

正如@JackRyder 所说，navbar-default 缺少nav 元素上的类，并添加了显示按钮和切换功能。 JSFiddle

【讨论】：

navbar-default、navbar-light 或 navbar-dark 是可以接受的。

【解决方案2】：

我遇到了同样的问题，通过在<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark"> 中设置navbar-dark 解决了它

【讨论】：