Bootstrap 5 导航栏不会折叠

Question

我不知道为什么这不起作用。 我正在使用 react 和 bootstrap 创建登录页面，在标题组件中我放置了一个导航栏，但它没有折叠。 我的代码：

import React from 'react';
import logo from '../images/logonoBG.png';

export default function Header() {
  return (
    <header className="header">
      <nav className="navbar navbar-expand-lg navbar-light bg-light">
        <div className="container-fluid">
          <img className="navbar-brand logo" src={logo} alt="#" />
          <button 
            className="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav me-auto mb-2 mb-lg-0">
              <li className="nav-item">
                <a className="nav-link active" aria-current="page" href="#gallery">Galeria</a>
              </li>
              <li className="nav-item">
                <a className="nav-link" href="#contact">Contato</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </header>
  )
}

Answer 1

您需要从按钮中删除“navbar-toggler”类名，并从 navbarSupportedContent 中删除“navbar-collapse”类名。其他一切都可以保持不变：

import React from 'react';

export default function Header() {
    return (
      <header className="header">
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <div className="container-fluid">
            <div className="navbar-brand logo"  alt="#">LOGO</div>
    
            <button 
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#navbarSupportedContent"
              aria-controls="navbarSupportedContent"
              aria-expanded="false"
              aria-label="Toggle navigation"
            >
              <span className="navbar-toggler-icon"></span>
            </button>
            <div className="collapse" id="navbarSupportedContent">
              <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                <li className="nav-item">
                  <a className="nav-link active" aria-current="page" href="#gallery">Galeria</a>
                </li>
                <li className="nav-item">
                  <a className="nav-link" href="#contact">Contato</a>
                </li>
              </ul>
            </div>
          </div>

        </nav>
      </header>
    )
  }

但是，行为会很奇怪。导航栏似乎对 justify-content 有一个 space-between 属性。当。。。的时候 navbarSupportedContent 显示，它会将您的按钮推到导航栏的中心。要解决这个问题，只需将按钮和 navbarSupportedContent 放在同一个 div 中。

以下应该可行，但可能需要根据您要使用的样式进行调整。

export default function Header() {
    return (
      <header className="header">
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <div className="container-fluid">
            <div className="navbar-brand logo"  alt="#">LOGO</div>
            <div>
            <button 
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#navbarSupportedContent"
              aria-controls="navbarSupportedContent"
              aria-expanded="false"
              aria-label="Toggle navigation"
            >
              <span className="navbar-toggler-icon"></span>
            </button>
            <div className="collapse" id="navbarSupportedContent">
              <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                <li className="nav-item">
                  <a className="nav-link active" aria-current="page" href="#gallery">Galeria</a>
                </li>
                <li className="nav-item">
                  <a className="nav-link" href="#contact">Contato</a>
                </li>
              </ul>
            </div>
          </div>
          </div>
        </nav>
      </header>
    )
  }