html - Bootstrap-导航栏切换不显示

Question

我使用 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

Answer 1

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