如何使用Bootstrap实现导航栏项的指定对齐布局

Your current code is pushing all items to the right because of the ml-auto on the brand and ms-auto on the Nav. To achieve your desired layout (left logo, centered middle links, right auth buttons), we'll use Bootstrap's flexbox utilities to split the navbar into three distinct sections.

Here's the modified code:

<Navbar bg={backgroundColor} variant="dark" expand="md" fixed="top">
  <Container className="d-flex align-items-center w-100">
    {/* Left: Logo */}
    <Navbar.Brand href="/">Logo</Navbar.Brand>
    
    {/* Mobile toggle button */}
    <Navbar.Toggle aria-controls="basic-navbar-nav" className="ms-auto" />
    
    {/* Collapsible content - split into center and right sections */}
    <Navbar.Collapse id="basic-navbar-nav" className="d-flex justify-content-between w-100 mt-2 mt-md-0">
      {/* Center: About, Blog, Writeups */}
      <Nav className="justify-content-center flex-grow-1">
        <Nav.Item>
          <Nav.Link className={textColor} href="/about">About</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link className={textColor} href="/blog">Blog</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link className={textColor} href="/writeups">Writeups</Nav.Link>
        </Nav.Item>
      </Nav>
      
      {/* Right: Sign Up, Sign In */}
      <Nav>
        <Nav.Item>
          <Nav.Link className={textColor.concat(" btn")} href="/sign-up">Sign Up</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link className={textColor.concat(" btn btn-primary")} href="/sign-in">Sign In</Nav.Link>
        </Nav.Item>
      </Nav>
    </Navbar.Collapse>
  </Container>
</Navbar>

Key Changes Explained: #

• Container Setup: Added d-flex align-items-center w-100 to make the container a full-width flex container that aligns items vertically.
• Logo: Removed ml-auto so it stays anchored to the left.
• Mobile Toggle: Added ms-auto to push the toggle button to the right on mobile views.
• Collapsible Content:
  • Used d-flex justify-content-between w-100 to make the collapsed content a full-width flex container.
  • The middle Nav has flex-grow-1 justify-content-center—this makes it fill the remaining space between the logo and right links, centering its items perfectly.
  • Split the links into two separate Nav components: one for center content, one for right auth buttons.
• Spacing: Added mt-2 mt-md-0 to fix vertical spacing between the toggle and links on mobile.

This setup will give you the exact layout you want on desktop, and a clean collapsed menu on mobile devices.

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