为什么我的引导程序导航栏在移动设备中消失了？答案

【问题标题】：Why is my navbar from bootstrap disappearing when in mobile?为什么我的引导程序导航栏在移动设备中消失了？
【发布时间】：2019-09-21 20:54:15
【问题描述】：

我正在使用引导程序的导航栏，它在大屏幕上完美显示，但是当它进入移动设备时，它完全消失了。

我已经尝试过@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>

【问题讨论】：

标签： mobile bootstrap-4 navbar

【解决方案1】：

空间是塌陷还是只是看起来很隐蔽？

【讨论】：

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

【解决方案2】：

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

【讨论】：

【解决方案3】：

已经解决了（有点）我需要在 css 中添加 .navbar-toggle 和 .navbar-toggle .icon-barin

【讨论】：