React-Bootstrap实现上下两行导航栏出现重叠对齐问题求解

问题根源 #

你遇到的重叠和对齐问题由两个配置错误导致：

• 两个Navbar都设置了fixed="top"，默认都会固定在视口最顶部，脱离文档流后自然重叠
• 两个导航内部没有统一使用Bootstrap的Container组件包裹内容，导致内容宽度约束不一致，无法对齐

解决方案 #

1. 调整两个导航的定位配置

给两个导航设置不同的z-index和top偏移值，实现上下堆叠不重叠

2. 统一内容容器

两个Navbar内部都用相同配置的Container包裹内容，自动对齐

3. 给页面添加顶部内边距

避免页面正文被固定定位的导航遮挡

完整修改代码 #

MainNav.tsx

import React from 'react';
import { Navbar, Container, Nav } from 'react-bootstrap';

export default function MainNav() {
  return (
    <Navbar expand="md" className="top-nav" fixed="top" bg="light">
      <Container>
        <Nav className="me-auto">
          <Navbar.Brand href="#home">Minimal Blog</Navbar.Brand>
        </Nav>
      </Container>
    </Navbar>
  )
}

NavigationBar.tsx

import React from 'react';
import { Navbar, Container, Nav } from 'react-bootstrap';

export default function NavigationBar() {
  return (
    <Navbar expand="md" className="sub-nav" fixed="top" bg="white">
      <Container>
        <Nav className="me-auto">
          <Nav.Link href="#home">Blog</Nav.Link>
          <Nav.Link href="#features">About</Nav.Link>
        </Nav>
      </Container>
    </Navbar>
  )
}

全局CSS样式

/* 可根据你实际的导航高度调整数值 */
.top-nav {
  height: 56px;
  z-index: 1031; /* 比下层导航层级高 */
}
.sub-nav {
  top: 56px; /* 等于上层导航的高度 */
  height: 56px;
  z-index: 1030;
}
/* 给body加顶部内边距，等于两个导航总高度，避免内容被遮挡 */
body {
  padding-top: 112px !important;
}

App.tsx 引入逻辑不需要修改

import MainNav from './MainNav';
import NavigationBar from './Navbar';

function App() {
  return (
    <>
      <MainNav />
      <NavigationBar />
      {/* 你的其他页面内容 */}
    </>
  )
}

如果需要响应式适配小屏折叠菜单，只需要给下层导航的top值在折叠时动态调整为上层导航高度加展开菜单的高度即可。

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