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。 /> 这是正确的代码，从零重写：

＆＃13;

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

＆＃13;

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

1 个答案: