时间戳

首页 > 解决方案 > Bootstrap - 单击汉堡图标时导航栏菜单项不可见

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

问题描述

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

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

标签： htmltwitter-bootstrap-3

解决方案

试试这个片段......取自 w3schools......简单而酷......不要忘记添加引导 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>

推荐阅读