react-bootstrap 如何使导航栏切换作为侧边栏打开

Question

当视口尺寸减小时，我希望导航栏内容在右侧打开

正如您在单击切换时所看到的，内容占据了我希望它作为左侧边栏打开的整个位置。 这是代码：

<Container className={`${props.className} sticky-top`} fluid>
      <Navbar bg="light" variant="light" expand="lg">
        <Navbar.Brand>
          <Image
            width={65}
            height={65}
            src="/images/rnsit-logo.jpg"
            alt="rnsit-logo"
            fluid
          />
          &nbsp;&nbsp;
          <span>RNSIT</span>
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="ml-auto">
            <LinkContainer to="/">
              <Nav.Link>
                <i className="fas fa-home"></i>&nbsp;Home
              </Nav.Link>
            </LinkContainer>
            <LinkContainer to="/about-us">
              <Nav.Link>
                <i className="fas fa-info-circle"></i>&nbsp;About Us
              </Nav.Link>
            </LinkContainer>
            <LinkContainer to="/admissions">
              <Nav.Link>
                <i className="fas fa-university"></i>&nbsp;Admissions
              </Nav.Link>
            </LinkContainer>
            <NavDropdown
              title={
                <span>
                  <i className="fas fa-building"></i>&nbsp;Departmemts
                </span>
              }
              id="basic-nav-dropdown"
            >
              {dropdownContent}
            </NavDropdown>
            <LinkContainer to="/placements">
              <Nav.Link>
                <i className="fas fa-briefcase"></i>&nbsp;Placements
              </Nav.Link>
            </LinkContainer>
            <LinkContainer to="/events">
              <Nav.Link>
                <i className="fas fa-calendar-check"></i>&nbsp;Events
              </Nav.Link>
            </LinkContainer>
            <LinkContainer to="/contact-us">
              <Nav.Link>
                <i className="fas fa-address-book"></i>&nbsp;Contact Us
              </Nav.Link>
            </LinkContainer>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    </Container>

提前致谢！