Question

见下面的小提琴。我想我对如何创建可折叠导航栏感到困惑（在较小的设备上显示汉堡包菜单。我做错了什么？

HTML：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<header class="navbar" id="c-nav">
  <div class="container">
    <a id="logo" href="/">Logo</a>
    <nav>

      <div class="navbar-header">
        <button class="navbar-toggle" type="button" 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>
        <!--//nav-toggle-->
      </div>
      <!--//navbar-header-->

      <div class='navbar-collapse collapse' id='navbar-collapse'>
        <ul class="nav navbar-nav navbar-right">
          <li><a class="header-text" href="/">Home</a></li>
          <li><a class="header-text" href="/section">Practice</a></li>
          <li><a class="header-text" href="/login">Log in</a></li>
        </ul>
      </div>
    </nav>
  </div>
</header>

Answer 1

只需添加jQuery，这应该可行：

<script   src="https://code.jquery.com/jquery-1.12.4.min.js"   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="   crossorigin="anonymous"></script>

小提琴：https://jsfiddle.net/ze5ju72n/

无法使用引导程序创建可折叠的导航栏

1 个答案: