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

【问题标题】：Bootstrap- Navbars menu items not visible when clicking hamburger iconBootstrap - 单击汉堡图标时导航栏菜单项不可见
【发布时间】：2018-09-24 11:22:03
【问题描述】：

感谢我能得到的所有帮助 :)

我正在尝试使用 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>

【问题讨论】：

你添加了 bootstrap js 文件吗？
是的，我有。我从 Bootstraps 网站复制了基本模板，其中包含 jquery 和 js 脚本。
如果这是您的真实代码，请将您的拼写错误 data-target:"#mainNavbar" 替换为 data-target="#mainNavbar"。现在似乎工作得很好。
嘿，这就是它不起作用的原因！谢谢！我错过了错字。

标签： html twitter-bootstrap-3

【解决方案1】：

试试这个 sn-p...取自 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>

【讨论】：

谢谢！这个有效，我不知道为什么。我对其进行了更改并将其复制到原始文件中并且它可以工作。这个带有我更改的 sn-p 与我之前的代码相同，但由于某种原因，我的旧代码不起作用而新代码起作用。好奇怪！

【解决方案2】：

您需要在您的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>

请记住，您需要先加载 jQuery，然后才能在 Bootstrap 中加载。

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

【讨论】：

这对我不起作用。在 Bootstrap 文档中，它说脚本应该在结束 body 标记之前。