React-Bootstrap Offcanvas导航栏响应式断点失效问题求助

错误1：expand属性值拼写错误 #

你第一版代码中expand="1g"使用了数字1，正确值应为小写字母L的lg，对应Bootstrap的992px响应式断点，拼写错误导致断点规则完全不生效，所以屏幕宽度变化时导航栏无任何响应。

错误2：错误将Navbar.Offcanvas嵌套在Navbar.Collapse内 #

React-Bootstrap的Offcanvas类型导航栏本身内置了响应式逻辑，不需要额外包裹<Navbar.Collapse>组件。你嵌套后，大屏下Collapse组件正常展开，但Offcanvas组件默认在非激活状态下为隐藏状态，导致导航内容无法正常显示在导航栏上。

修正后的完整代码 #

import {
  Navbar,
  Container,
  Offcanvas,
  NavDropdown,
  Form,
  FormControl,
  Button,
  Nav,
} from "react-bootstrap";

const Navigation = () => {
  return (
    <Navbar bg="light" expand="lg" collapseOnSelect>
      <Container fluid>
        <Navbar.Brand href="#">Navbar Offcanvas</Navbar.Brand>
        <Navbar.Toggle aria-controls="offcanvasNavbar" />
        <Navbar.Offcanvas
          id="offcanvasNavbar"
          aria-labelledby="offcanvasNavbarLabel"
          placement="end"
        >
          <Offcanvas.Header closeButton>
            <Offcanvas.Title id="offcanvasNavbarLabel">
              Offcanvas
            </Offcanvas.Title>
          </Offcanvas.Header>
          <Offcanvas.Body>
            <Nav className="justify-content-end flex-grow-1 pe-3">
              <Nav.Link href="#action1">Home</Nav.Link>
              <Nav.Link href="#action2">Link</Nav.Link>
              <NavDropdown title="Dropdown" id="offcanvasNavbarDropdown">
                <NavDropdown.Item href="#action3">Action</NavDropdown.Item>
                <NavDropdown.Item href="#action4">
                  Another action
                </NavDropdown.Item>
                <NavDropdown.Divider />
                <NavDropdown.Item href="#action5">
                  Something else here
                </NavDropdown.Item>
              </NavDropdown>
            </Nav>
            <Form className="d-flex">
              <FormControl
                type="search"
                placeholder="Search"
                className="me-2"
                aria-label="Search"
              />
              <Button variant="outline-success">Search</Button>
            </Form>
          </Offcanvas.Body>
        </Navbar.Offcanvas>
      </Container>
    </Navbar>
  );
};

修正后即可实现预期效果：屏幕宽度小于992px时显示汉堡菜单，点击弹出侧边Offcanvas导航；屏幕宽度大于等于992px时隐藏汉堡菜单，导航内容直接显示在导航栏上。

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