我的Bootstrap汉堡菜单无法显示链接

时间:2016-03-20 20:43:58

标签: html css twitter-bootstrap navbar

所以我现在一直在看我的代码很长一段时间,我无法弄清楚为什么我的引导汉堡包菜单在你点击它时不会显示链接。我已经检查了数据目标和类/ ID名称以确保它们匹配,但它仍然没有显示。

    <header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-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="index.html">
        <img id="brand-image" alt="Web Logo" src="images/logo.png"> 
      </a>
    </div>
    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
      <ul class="nav navbar-nav navbar-right">
        <li>
          <a href="coal.html">COAL</a>
        </li>
        <li>
          <a href="electric.html">ELECTRIC</a>
        </li>
        <li>
          <a href="wind.html">WIND</a>
        </li>
        <li>
            <a href="credits.html">CREDITS</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

1 个答案:

答案 0 :(得分:0)

您可能忘记导入Bootstrap Javascript文件或jQuery文件?没有它们就无法工作。

只需在身体标记的末尾添加:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>

希望这有帮助