如何使用React Bootstrap实现两行布局的响应式Navbar导航栏

实现方案 #

核心逻辑是利用媒体查询仅在桌面断点（lg及以上）修改Navbar容器的flex排列方向，移动端保留默认的水平排列逻辑，不影响原生的折叠交互。

组件代码

import Navbar from 'react-bootstrap/Navbar';
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';

function CustomNavbar() {
  return (
    <Navbar bg="light" expand="lg">
      <Container className="navbar-custom-container">
        <Navbar.Brand href="#home">Logo - Site Name</Navbar.Brand>
        <Navbar.Toggle aria-controls="custom-navbar-nav" />
        <Navbar.Collapse id="custom-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link href="#link1">Link1</Nav.Link>
            <Nav.Link href="#link2">Link2</Nav.Link>
            <Nav.Link href="#link3">Link3</Nav.Link>
            <Nav.Link href="#link4">Link4</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

配套CSS样式

/* 匹配Bootstrap默认lg断点992px，仅桌面端生效 */
@media (min-width: 992px) {
  .navbar-custom-container {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  /* 可选：调整品牌与导航栏的上下间距 */
  .navbar-custom-container .navbar-collapse {
    margin-top: 8px;
  }
}

说明 #

• 该方案完全保留react-bootstrap原生的导航折叠/展开交互，不会出现菜单无法正常展开的问题
• 移动端下默认展示左侧品牌+右侧汉堡按钮的布局，符合需求
• 桌面端自动切换为品牌占第一行、导航链接占第二行的布局
• 如果你自定义过Bootstrap的断点尺寸，把媒体查询的min-width值改成你自定义的lg断点值即可。

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