时间戳

首页 > 解决方案 > 当我将它放在按钮组中时，Bootstrap 4 NavBar 切换按钮不起作用

javascript - 当我将它放在按钮组中时，Bootstrap 4 NavBar 切换按钮不起作用

问题描述

当导航栏折叠时，我需要两个按钮以及切换按钮。当我失望时，希望这些按钮与菜单项一起折叠。所以我把按钮放在带有切换按钮的按钮组中。现在切换按钮不再起作用了。

这是代码。请让我知道我犯了什么错误。先感谢您。

<nav class="navbar navbar-expand-md navbar-dark sticky-top" style="background-color: #0a0a0a; margin-bottom: 0 !important; min-height: 60px;">
    <div class="container">
        <div class="nav navbar-header">
            <a href="#"><img src="images/logo.png" class="logo" alt=""/></a>
        </div>

         <div class="collapse navbar-collapse flex-column " id="navbar">
             <ul class="navbar-nav  w-100 justify-content-center px-3">
                 <li class="nav-item active">
                     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                 </li>
                 <li class="nav-item dropdown">
                     <a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Courses
                     </a>
                 </li>
                 <li class="nav-item dropdown">
                     <a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Classes
                      </a>
                  </li>
                  <li class="nav-item dropdown">
                      <a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      USP
                      </a>
                  </li>
                  <li class="nav-item dropdown">
                      <a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Contact
                      </a>
                  </li>
              </ul>
          </div>

          <div class="btn-group" role="group" aria-label="Basic example" style="color: white;">
              <button type="button" class="btn .btn-primary-outline border-right" style="color: white;">Sigh In</button>
              <button type="button" class="btn btn-danger"><i style="color: white;" class="fa fa-search" aria-hidden="true"></i></button>
              <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav">
                    <span class="navbar-toggler-icon"></span>
              </button>
          </div>
      </div>
  </nav>

标签： javascripthtmljquerycssbootstrap-4

解决方案

这里有导航栏 ID

<button class="navbar-toggler" data-toggle="collapse" data-target="#**navbarNav**">

这里必须相同

<div class="collapse navbar-collapse flex-column " id="**navbar**">

也不要忘记在你的页面上调用这些js

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

推荐阅读