React-Bootstrap Navbar水平对齐异常、尺寸过大问题求解

导航栏对齐错乱、尺寸异常是代码结构问题导致的，和登录态/管理员态切换的触发逻辑无关，也不需要拆分独立组件，具体问题点：

• 多处无意义的div嵌套破坏了React Bootstrap Navbar默认的flex水平布局规则，div作为块级元素会强制内部内容换行
• 管理员专属的下拉菜单被单独包裹在新的div和Nav组件里，没有和其他已登录导航项放在同一容器，导致额外换行
• FormControl重复声明className属性，后写的me-2会覆盖前面的justify-content-center，导致搜索框样式失效
• Navbar.Brand内直接放置h2标签，标签默认的大字号、上下外边距会撑高导航栏整体尺寸
• Navbar.Collapse没有配置宽度占满的类，内部元素无法按预期分配水平空间

直接替换原有Navbar代码即可：

<Navbar expand="lg" className="bg-body-tertiary">
  <Navbar.Brand href="/homepage" className="logo">
    BookShopper
    {/* 若使用logo图片请删除上方文字，解开下方注释，不要同时放文字和大尺寸图片撑高导航栏 */}
    {/* <img src='logo.png' height='40px' alt='site logo'/> */}
  </Navbar.Brand>

  <Navbar.Toggle aria-controls="responsive-navbar-nav" />
  <Navbar.Collapse id="responsive-navbar-nav" className="w-100">
    <Form className="d-flex flex-grow-1 justify-content-center px-3">
      <FormControl
        type="search"
        placeholder="Search"
        className="me-2"
        aria-label="Search"
      />
    </Form>

    {isLoggedIn ? (
      <Nav className="align-items-center">
        <Nav.Link href="/edit">Profile</Nav.Link>
        <Nav.Link href="#" onClick={handleClick}>
          Logout
        </Nav.Link>
        <Nav.Link href="/cart">
          <BsFillBasket3Fill />
        </Nav.Link>
        {isUserAdmin && (
          <NavDropdown
            title="Market Place"
            id="collasible-nav-dropdown"
          >
            <NavDropdown.Item href="/stock">Stock</NavDropdown.Item>
            <NavDropdown.Item href="/users">Users</NavDropdown.Item>
            <NavDropdown.Item href="/add-book">
              Add Book
            </NavDropdown.Item>
          </NavDropdown>
        )}
      </Nav>
    ) : (
      <Nav className="align-items-center">
        <Nav.Link href="/login">Login</Nav.Link>
        <Nav.Link href="/cart">
          <BsFillBasket3Fill />
        </Nav.Link>
      </Nav>
    )}
  </Navbar.Collapse>
</Navbar>

• 删除所有包裹Nav组件的冗余div，从根源避免块级元素强制换行
• 将管理员专属的Market Place下拉菜单合并到已登录状态的同一个Nav容器中，不再单独创建新的Nav实例
• 给Navbar.Collapse添加w-100类使其占满导航栏可用宽度，搜索框添加flex-grow-1类自动占据中间剩余空间，实现「品牌标识-搜索框-操作导航」的标准电商导航栏水平布局
• 移除Brand内的h2标签，避免标签默认排版样式撑高导航栏，若需要调整品牌文字大小，直接给自定义的.logo类写CSS即可
• 修复FormControl重复声明className导致的样式覆盖问题
• 给所有Nav组件添加align-items-center类，保证内部文字、图标垂直居中对齐
• 之前注释掉的Container组件可以恢复使用，包裹在Navbar.Brand和Navbar.Collapse外层即可，用来限制导航栏最大宽度、适配不同屏幕的左右边距，不会破坏现有布局。

内容的提问来源于stack exchange，提问作者Galilior