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

【问题标题】：Bootstrap 4 NavBar toggle Button not Working when i put it inside button group当我将它放在按钮组中时，Bootstrap 4 NavBar 切换按钮不起作用
【发布时间】：2020-05-15 23:59:28
【问题描述】：

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

这里是代码。请让我知道我犯了什么错误。提前谢谢你。

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

【问题讨论】：

标签： javascript html jquery css bootstrap-4

【解决方案1】：

这里带有导航栏 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>

【讨论】：

【解决方案2】：

navbar-toggler 按钮上的“data-target”设置为“navbarNav”，这需要设置为导航栏的 ID，即“navbar”。

<div class="collapse navbar-collapse flex-column" id="navbar"> <!-- NOTE: id="navbar" -->
    <!-- Navigation List -->
</div>

<div class="btn-group">
    <!-- buttons -->
    <button class="navbar-toggler" data-toggle="collapse" data-target="#navbar"> 
    <!-- NOTE: data-target = "#navbar" (these should be identical) -->
    <span class="navbar-toggler-icon"></span>
    </button>
</div>

【讨论】：