Question

页面缩小时，我试图在我的导航栏中显示一个汉堡菜单。

    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))}

将元素返回到汉堡菜单中的渲染。但是实际的汉堡包没有出现

Answer 1

尝试向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>

缩小页面大小时未显示React-Bootstrap汉堡包菜单

1 个答案: