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

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

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

Bootstrap导航栏未显示折叠按钮

1 个答案: