React Bootstrap中Nav组件顶部加元素导致导航项右移问题如何解决？

问题核心原因 #

你当前的导航栏没有做明确的三区域拆分，中间导航组设置了w-100占满了全部容器宽度，导致左右两侧没有空余位置放置自定义文本，强制悬浮才会出现遮挡点击的问题。

修改方案 #

直接利用Bootstrap自带的flex布局能力，把导航栏拆为左侧文本区、中间导航区、右侧电话区三个独立模块即可：

1. 调整React组件代码

class Navigation extends React.Component {
  render() {
    return (
      <Navbar variant="light" expand="md" className="justify-content-between align-items-center">
        {/* 左侧区域：左上角标语 + 移动端品牌标识 */}
        <div className="nav-left d-flex align-items-center">
          <Navbar.Brand href="/" className="d-md-none me-2">
            <img src={logo} height="55px" alt="Mikes Pizzeria" />
          </Navbar.Brand>
          <div id="navContent">Italian Quisine at its Best</div>
        </div>

        {/* 中间响应式折叠导航区域 */}
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="mx-auto align-items-center nav-fill">
            <Nav.Link href="/menu">菜单</Nav.Link>
            <Nav.Link href="/events">活动</Nav.Link>
            <Nav.Link href="/">社交账号</Nav.Link>
            <a className="d-none d-md-block mx-3" href="/">
              <img src={logo} alt="Mikes Pizzeria" height="100px"/>
            </a>
            <Nav.Link href="/">VIP会员</Nav.Link>
            <Nav.Link href="/about">关于我们</Nav.Link>
            <Nav.Link href="/">在线点餐</Nav.Link>
          </Nav>
        </Navbar.Collapse>

        {/* 右侧区域：右上角联系电话 */}
        <div className="nav-right d-none d-md-block">
          订位电话：XXX-XXXXXXX
        </div>
      </Navbar>
    )
  }
}

2. 调整CSS代码

.navbar{
  background-color: rgba(210, 194, 158, 0.7);
  margin-bottom: 30px;
  /* 适配小屏避免元素挤压 */
  padding: 0 1rem;
}
#navContent{
  font-size: 20px;
  margin: 0 10px;
}
.nav-right{
  font-size: 18px;
  font-weight: 500;
}

关键调整说明 #

• 移除了中间Nav组件的w-100属性，保留mx-auto让导航组在中间区域自动居中，不会抢占左右两侧的展示空间
• 新增独立的左右容器放置自定义文本，走正常文档流不会遮挡中间导航的点击区域
• 中等以下屏幕默认隐藏右侧电话，避免和折叠按钮冲突，如果需要移动端也展示电话，可以把电话内容额外加一份到折叠导航的末尾即可

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