页面缩小时,我试图在我的导航栏中显示一个汉堡菜单。
return (
<div id="horizontalNavbar" className={`${styles.menuHorizontal}`}>
<nav className='a-header-wrapper justify-content-between' }>
<div className='a-brand-container position-relative w-100'>
<span className='font-weight-bold'>Test</span>
<Navbar.Collapse className={styles.navbarCollapse}>
<Nav className={styles.navbarNav}>
{(this.props.items || []).map((item, index) => this.createHorizontalMenuItem(item, index))}
</Nav>
</Navbar.Collapse>
</div>
</nav>
</div>
)
当前,当我调整页面大小时,什么也没有发生。 我已经测试并确认
{(this.props.items || []).map((item, index) => this.createHorizontalMenuItem(item, index))}
将元素返回到汉堡菜单中的渲染。但是实际的汉堡包没有出现
答案 0 :(得分:0)
尝试向Navbar添加切换按钮和ID。折叠:
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse className={styles.navbarCollapse} id="basic-navbar-nav">
<Nav className={styles.navbarNav}>
{(this.props.items || []).map((item, index) => this.createHorizontalMenuItem(item, index))}
</Nav>
</Navbar.Collapse>