当视口大小减小时,我希望导航栏内容在右侧打开
正如您在单击切换时看到的那样,内容占据了我希望它作为左侧边栏打开的整个位置。这是代码:
<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
/>
<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> Home
</Nav.Link>
</LinkContainer>
<LinkContainer to="/about-us">
<Nav.Link>
<i className="fas fa-info-circle"></i> About Us
</Nav.Link>
</LinkContainer>
<LinkContainer to="/admissions">
<Nav.Link>
<i className="fas fa-university"></i> Admissions
</Nav.Link>
</LinkContainer>
<NavDropdown
title={
<span>
<i className="fas fa-building"></i> Departmemts
</span>
}
id="basic-nav-dropdown"
>
{dropdownContent}
</NavDropdown>
<LinkContainer to="/placements">
<Nav.Link>
<i className="fas fa-briefcase"></i> Placements
</Nav.Link>
</LinkContainer>
<LinkContainer to="/events">
<Nav.Link>
<i className="fas fa-calendar-check"></i> Events
</Nav.Link>
</LinkContainer>
<LinkContainer to="/contact-us">
<Nav.Link>
<i className="fas fa-address-book"></i> Contact Us
</Nav.Link>
</LinkContainer>
</Nav>
</Navbar.Collapse>
</Navbar>
</Container>
提前致谢!