Question

我的导航栏工作正常，但现在我正在尝试为移动设备优化它，所以如果屏幕足够宽，则用户必须单击按钮
这是我的代码：

<nav class="navbar navbar-default navbar-fixed-top shadow">
    <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 href="http://red-sec.net" class="navbar-brand">Red-Sec.net</a>
      </div>
      <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="menuitem"><a href="http://red-sec.net">Home</a></li>
        <li class="menuitem"><a href="http://announcements.red-sec.net">Announcements</a></li>
        <li class="menuitem"><a href="http://forum.red-sec.net">Forum</a></li>
        <li class="menuitem"><a href="http://blog.red-sec.net">Blog</a></li>
        <li class="menuitem"><a href="http://news.red-sec.net">News</a></li>
        <li class="menuitem"><a href="http://donate.red-sec.net">Donate</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="menuitem"><a href="http://red-sec.net/signup.php">Sign Up</a></li>
        <li class="menuitem"><a href="http://red-sec.net/Login.php">Log In</a></li>
      </ul>
    </div>
  </nav>

我只是在我的手机上检查它，导航栏显示正常，好像没有优化，但如果我使铬窗口更小它显示我按钮但是当我点击它没有任何反应（是的，我包括jquery和引导程序javascript）

Answer 1

这可能是因为您错过了data-target".navbar-collapse"中的等号，而不是data-target=".navbar-collapse"。

对于它的价值，您还没有关闭container div。

请尝试使用this updated fiddle代码：）

bootstrap移动导航栏切换不起作用

1 个答案: