Question

我非常感谢我能提供的所有帮助：）

我正在尝试使用Bootstrap 3.3.7和在较小视口上带有汉堡包图标的可折叠导航栏。

我无法使用汉堡包图标。我设法制作了一个汉堡包图标，该图标仅在较小的视口中可见，但是当我单击该汉堡包图标时，它不显示其应包含的菜单项。

如何使汉堡包图标正常工作？

以下是导航栏的代码：

<!-- Navigation bar -->
<nav class="navbar navbar-expand-lg navbar-inverse">
  <div class="container">   <!-- Creates margins for the navbar content on left and right -->


      <!-- Home icon -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target:"#mainNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand"><span class="glyphicon glyphicon-home"></span></a>
    </div>


     <!--  Menu items  -->
     <div class="collapse navbar-collapse" id="mainNavbar">
       <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
     </div>

  </div>
</nav>

Answer 1

试试这个摘录...摘自w3schools ...简单又酷..不要忘记添加 bootstrap JS文件

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li> 
      </ul>
      <ul class="nav navbar-nav navbar-right">
    <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
  </ul>
    </div>
  </div>
</nav>

Answer 2

您需要在bootstrap js标签中包含head CDN，并确保您具有最新版本的jQuery。

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

请记住，您需要先将jQuery加载到Bootstrap中。

这是一个工作的小提琴：https://jsfiddle.net/hkLfx6u8/16/

Bootstrap-导航栏菜单项在单击汉堡包图标时不可见

2 个答案: