Bootstrap 导航栏没有显示折叠按钮

Question

<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a href="" class="navbar-brand">Online Notes</a>
            <button type="button" class="navbar-toggle">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="navbar-collapse collapse">

        </div>
    </div>
</nav>

我是 bootstrap 新手，当我尝试使用 bootstrap 添加导航栏时，折叠菜单未显示三个图标栏。你能帮助我吗？提前致谢。

Answer 1

因为你做错了。这是我用来设计导航栏的折叠导航栏代码

<nav class="navbar navbar-expand-sm fixed-top navbar-dark">
  <div class="container">
     <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
       <span class="navbar-toggler-icon"></span>
         </button>
         <a href="#" class="navbar-brand">
          <img src="images/123.png" class="d-inline-block" width="70" height="70" alt="">Spaceyfi </a>
         <div class="collapse navbar-collapse" id="navbarCollapse">
           <ul class="navbar-nav mr-auto">
             <li class="nav-item">
             <a href="#home" class="nav-link">Home</a></li>
             <li class="nav-item">
             <a href="#explore" class="nav-link">Explore</a></li>
             <li class="nav-item">
             <a href="#contactUs" class="nav-link">Team</a></li>
             <li class="nav-item">
             <a href="#contactUs" class="nav-link">Gallery</a></li>
             </ul>
       </div>
  </div>
</nav>

现在，你错过了很多重要的标签和类，例如

   <span class="navbar-toggler-icon"></span>

这用于显示这三行，data-target 用于告诉应该在折叠菜单中的元素。

即在声明 data-target="#navbarCollapse" 之后，我在

中使用了相同的 ID

 <div class="collapse navbar-collapse" id="navbarCollapse"> 

告诉折叠菜单中的内容。

尝试阅读官方引导文档

https://getbootstrap.com/docs/4.0/components/navbar/