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