bootstrap-隐藏移动菜单（导航栏）

Question

我有一个带有导航栏的网站。 在手机上或屏幕太小时，我可以通过单击按钮进行切换以隐藏或查看。 这个工作宏伟。 但是，默认情况下如何隐藏它，因为它占据了大部分屏幕

使用Bootstrap 3.0

      <div class ="navbar navbar-inverse navbar-static-top" role ="navigation">

        <div class ="container">
          <div class ="navbar-header">

            <button type ="button" class ="navbar-toggle" data-toggle ="collapse" data-target=".navbar-collapse">

              <span class ="sr-only">Toggle navigation </span>
              <span class ="icon-bar"></span>
              <span class ="icon-bar"></span>

              <span class ="icon-bar"></span>


            </button>

            <a class ="navbar-brand" href ="#"> Work Experience</a>

          </div>

          <div class ="navbar-collapse collaspe">
            <ul class ="nav navbar-nav navbar-right">
              <li ><a href ="index.php">Home &#8962;</a></li>

              <li class ="active"> <a href ="#">Records &#128064;</a></li>
              <li> <a href ="logout.php">logout &#128274;</a></li>
            </ul>

          </div>

        </div>

      </div>

谢谢

Answer 1

您的代码中有很多错误。
您不能使用data-target=".navbar-collapse"来访问类似html中的类的元素。
您应该使用元素的ID。
这是正确的代码，从零重写：

 <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <nav class="navbar navbar-inverse navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#you-cant-use-class-like-that" 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> <a class="navbar-brand" href="#">Work Experience</a> </div> <div class="collapse navbar-collapse" id="you-cant-use-class-like-that"> <ul class="nav navbar-nav navbar-right"> <li><a href="index.php">Home &#8962;</a> </li> <li class="active"><a href="#">Records &#128064;</a> </li> <li><a href="logout.php">logout &#128274;</a> </li> </ul> </div> </div> </nav>