Html 引导-导航栏切换未显示

我使用导航栏切换来显示移动设备上的组菜单，但它不起作用！有什么问题？下面是我的代码和JSFIDLE。 实际上，当我给class

navbar切换时，

HTML:

---

正如@JackRyder所说，

navbar default

在

nav

元素上缺少类，添加了显示按钮和切换

navbar默认值缺少nav元素上的类，添加显示按钮和切换，您可以覆盖默认颜色，签出@JackRyder非常感谢，但是默认情况下，在移动大小中，菜单没有折叠，但是我给了类

折叠的
ul
标签。我该如何解决这个问题呢？试试看，我把ul放在div中，并给container类“navbar collapse-collapse”，它现在将保持崩溃状态default@JackRyder非常感谢<代码>导航栏默认值

，

导航栏亮起

，或

导航栏暗起

是可以接受的。

<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>

.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;
}