汉堡图标不显示折叠导航栏项目答案

【问题标题】：Hambergur icon not displaying collapsed navbar items汉堡图标不显示折叠导航栏项目
【发布时间】：2021-08-19 06:56:08
【问题描述】：

我正在制作一个反应应用程序并使用引导导航栏使其具有移动响应性，但汉堡图标未显示导航栏的项目折叠这里有什么问题？有什么建议吗？

<!-- Bootstrap 4.1.3 library -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


<!-- Start of HTML code -->
<header id="header" className="fixed-top d-flex align-items-center header-transparent">
  <div className="container d-flex align-items-center navbar navbar-expand-lg navbar-light navbar-inverse ">

    <div className="logo mr-auto">
      <h1 className="text-light heading"><a href="/"><span>Prep</span></a></h1>
    </div>
    <button className="navbar-toggler  navbar-dark" type="button" data-toggle="collapse" data-target="#navbarmenu" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>

    <nav className="nav-menu d-none d-lg-block">
      <div className="collapse navbar-collapse" id="navbarmenu">
        <ul className="navbar-nav mr-auto">
          <li className="nav-item"><a href="#about">About</a></li>
          <li className="nav-item"><a href="#details">Features</a></li>
          <li className="nav-item"><a href="#team">Team</a></li>
          <li className="nav-item"><a href="#contact">Contact</a></li>
          <li className="nav-item"><a href="#faq">FAQs</a></li>
          <li className="nav-item">
            <Link to="/signup">Register</Link>
          </li>

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

  </div>
</header>

【问题讨论】：

为什么你使用className而不是class=""
他们说他们正在使用 react

标签： html jquery css bootstrap-4

【解决方案1】：

我已经为你做了这件事。你可以在你的反应代码中看到它是如何工作的。因为我现在还没有安装 react 。但是使用 botstrap 我已经做到了。你可以检查一下。

这里是代码 sn-ps：

 <nav className='navbar navbar-dark navbar-expand-lg bg-dark'>
        <a href="#" class="text-light navbar-brand">Prep</a>
    <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarmenu"  aria-expanded="false" aria-label="Toggle navigation"><span className="navbar-toggler-icon"></span>
    </button>

    <div className="collapse navbar-collapse" id="navbarmenu">
        <ul className="navbar-nav mr-auto">
            <li className="nav-item"><a className='nav-link' href="#about">About</a></li>
            <li className="nav-item"><a className='nav-link' href="#details">Features</a></li>
            <li className="nav-item"><a className='nav-link' href="#team">Team</a></li>
            <li className="nav-item"><a className='nav-link' href="#contact">Contact</a></li>
            <li className="nav-item"><a className='nav-link' href="#faq">FAQs</a></li>
            <li className="nav-item"><Link to="/signup">Register</Link></li>

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

这是解决此问题的简便方法，而且非常简单。您正在使用 jsx 如果这工作正常，我会很高兴作为开发人员。

【讨论】：

【解决方案2】：

如果您使用 CDN 链接，请确保您已包含 jQuery 链接，如果您使用的是 npm install bootstrap，请确保您已导入引导程序 import 'bootstrap';

【讨论】：