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

Question

I appreciate all the help I can get :) 我感谢所有我能得到的帮助：）

I'm trying to do a collapsable navbar with Bootstrap 3.3.7 with a hamburger icon on smaller viewports. 我正在尝试在较小的视口上使用Bootstrap 3.3.7和一个汉堡包图标来折叠式导航栏。

I can't get the hamburger icon to work. 我无法使汉堡图标工作。 I've managed to make a hamburger icon which is visible only on smaller viewports but when I click the hamburger icon it doesn't show the menu items that it should contain. 我设法制作了一个汉堡包图标，该图标仅在较小的视口中可见，但是当我单击该汉堡包图标时，它不显示其应包含的菜单项。

How can I make the hamburger icon work? 如何使汉堡包图标正常工作？

Here is the code for the navigation bar: 这是导航栏的代码：

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

Try this snippet... taken from w3schools... simple and cool.. dont forget to add bootstrap JS file 试试这个片段...取自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

You need to include the bootstrap js cdn within your head tags and making sure you have the latest version of jQuery. 您需要在您的head标签中包含bootstrap js 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>

Keep in mind, you need to load the jQuery before loading in Bootstrap. 请记住，您需要先将jQuery加载到Bootstrap中。

Here is a working fiddle: https://jsfiddle.net/hkLfx6u8/16/ 这是一个有效的小提琴： https : //jsfiddle.net/hkLfx6u8/16/

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-09-24 11:46:14

解决方案2
0 2018-09-24 11:43:55

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-09-24 11:46:14

解决方案2 0 2018-09-24 11:43:55

解决方案1
1 已采纳 2018-09-24 11:46:14

解决方案2
0 2018-09-24 11:43:55