引导汉堡菜单不折叠答案

【问题标题】：Bootstrap hamburger menu not collapsing引导汉堡菜单不折叠
【发布时间】：2020-10-31 13:41:37
【问题描述】：

我正在 Bootstrap 中构建一个网站，但我的汉堡菜单没有崩溃。这是 HTML 代码：

<section>
      <div class="container-fluid main-banner">
          <div class="row">
            <div class="col-12">
       <nav class="navbar navbar-expand-lg navbar-light bg-light main-nav">
      <a class="navbar-brand" href="#"><img src="images/logo.png"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="custom-toggler" role="button" ><i class="fa fa-bars" aria-hidden="true"></i></span>
</button>
      <div class="collapse navbar-collapse">
       <ul class="navbar-nav ml-auto">
            <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">Our Culture</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">Our Curriculum</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">News</a> </li>
            <li class="nav-item"> <a class="nav-link see-through-button" href="#">Apply</a> </li>
        </ul>
      </div>
    </nav>
      </div>
          </div>
          <div class="row main-banner-text">
            <div class="col-lg-6">
                <h1>Know Your Greatness.</h1>
                <h3>Develop your passion and align your education with real world needs.</h3>
                <div class="top-padding"><a href="#" class="white-button">Your future starts now</a></div>
                 </div>
              <div class="col-lg-6"></div>
          </div>
        </div>
      </section>

我会感谢任何反馈，因为我在这一点上非常难过。我已经尝试查看其他线程，但还没有找到任何东西。

【问题讨论】：

能否在代码 sn-p 中添加整个 html 来加载引导程序？

标签： html bootstrap-4 collapse hamburger-menu

【解决方案1】：

您需要调用 data-target="#navbarSupportedContent" 中使用的 id 以显示隐藏导航栏 div 请查看以下代码

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

<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script><section>
      <div class="container-fluid main-banner">
          <div class="row">
            <div class="col-12">
       <nav class="navbar navbar-expand-lg navbar-light bg-light main-nav">
      <a class="navbar-brand" href="#"><img src="images/logo.png"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="custom-toggler" role="button" ><i class="fa fa-bars" aria-hidden="true"></i></span>
</button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
       <ul class="navbar-nav ml-auto">
            <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">Our Culture</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">Our Curriculum</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">News</a> </li>
            <li class="nav-item"> <a class="nav-link see-through-button" href="#">Apply</a> </li>
        </ul>
      </div>
    </nav>
      </div>
          </div>
          <div class="row main-banner-text">
            <div class="col-lg-6">
                <h1>Know Your Greatness.</h1>
                <h3>Develop your passion and align your education with real world needs.</h3>
                <div class="top-padding"><a href="#" class="white-button">Your future starts now</a></div>
                 </div>
              <div class="col-lg-6"></div>
          </div>
        </div>
      </section>

【讨论】：