Mobile 为什么我的引导栏在移动设备中消失了？

我使用的是bootstrap的导航栏，它可以在大屏幕上完美地显示，但当它进入手机时，它就完全消失了

我尝试了@media并改变了尺寸，但效果并不理想

 **css**

    #navbar {display: inline-block;  background-color: #ffffff;  color: #FFFFFF;}
    #navbar a:link  {outline: 0;}
    #navbar a:visited {color: #101010; margin:2px; padding: 5px;}
    #navbar a:active,  
    #navbar a:hover {background-color: #f5f5f5; color: #C21315;text-decoration: none; outline: 0;} 
    /* NAVIGATION BAR LINKS */
    #navbar li a { display: inline-block; overflow:visible; }
    #navbar li { display: inline-block; overflow:visible; }

    @media screen and (max-width: 600px) {  
    #navbar {display: block;}
     }

    **Bootstrap navbar**
     <nav id="navbar" class="navbar">
        <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle-"collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only"> Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                    </button>
                </div>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><a style=" font-size: 1.1em; padding-left: 25px; padding-right: 35px;" href="#"> <span class="glyphicon glyphicon-home" aria-hidden="true"></span><span class="sr-only">Home</span></a></li>

          <li class="dropdown">
            <a style=" font-size: 1.3em; padding-left: 25px; padding-right: 35px;" href="#" class="dropdown-toggle"  data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
              About </a>
            <ul class="dropdown-menu" >
              <li><a href="#">Our Library</a></li>
              <li><a href="#">Action2</a></li>    
              <li><a href="#">Action3</a></li>
              <li><a href="#">Action</a></li>
            </ul>
          </li>
        </ul>
      </div>
     </div>
    </nav>

**css**
#导航栏{显示：内联块；背景色：#ffffff；颜色：#ffffff；}
#导航栏a:链接{大纲：0；}
#导航栏a:已访问{颜色：#101010；边距：2px；填充：5px；}
#导航栏a：活动，
#导航栏a:悬停{背景色：#F5；颜色：#C21315；文本装饰：无；轮廓：0；}
/*导航栏链接*/
#导航栏LIA{显示：内联块；溢出：可见；}
#导航栏li{显示：内联块；溢出：可见；}
@媒体屏幕和（最大宽度：600px）{
#导航栏{显示：块；}
}
**引导导航条**
切换导航

空间是崩溃了还是看起来隐藏了？

我无法复制您的问题。在我的机器上很好用。你能把整个HTML文件粘贴到这里吗？（包括javascript和css导入）。如果您没有使用cdn（您从某个文件夹下载并链接了.js和.css文件，只需编写这些导入文件的版本即可）

问题已经解决（有些）

---

我需要在css中添加.navbar toggle和.navbar toggle.icon bari

不，它不会折叠，只是看起来很隐藏。好的，然后在按钮中单独尝试class=navbar toggle。您已折叠导航栏切换