react-bootstrap - react-bootstrap 如何使导航栏切换为侧边栏
问题描述
当视口大小减小时,我希望导航栏内容在右侧打开
正如您在单击切换时看到的那样,内容占据了我希望它作为左侧边栏打开的整个位置。这是代码:
<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>
提前致谢!
解决方案
推荐阅读
- scala - 未找到 sbt jline 依赖项
- android - 任务':app:compileDebugJavaWithJavac'在android中执行失败
- php - 函数PHP内的for循环
- swift - Swift导航栏动画问题
- c# - 如何在所有 TCP 客户端上实现连接用户列表
- excel - 导入/导出期间可变长度问题
- python - Python中可选参数和输出的优雅编码
- node.js - 使用 Mongo/Mongoose 更新 CRUD 中的问题
- google-sheets - 如何使用 Google 电子表格计算另一张工作表中单元格中的文本?
- vb.net - 如何清除 vb.net 中的画线?