如何定义React Bootstrap Navbar Toggle Hamburger应该何时出现在较小的屏幕上？

编程问答 2022-06-05

问题描述

我在我的导航栏中使用了React Bootstrap组件。它具有3个下拉菜单。目前，它以792px x 722px的分辨率显示汉堡图标。但我想以1000像素x 722像素显示汉堡包。

以下是我的Navbar react组件代码：

<Navbar collapSEOnSelect expand="lg" bg="dark">
      <Navbar.Brand>MyBrand</Navbar.Brand>
      <Navbar.Toggle aria-controls="responsive-navbar-nav" />
      <Navbar.Collapse id="responsive-navbar-nav">
        <Nav className="mr-auto">
          <NavDropdown title="Menu 1" id="collapsible-nav-dropdown">
            <NavDropdown.Item>Menu Item 1</NavDropdown.Item>
            <NavDropdown.Item>Menu Item 2</NavDropdown.Item>
          </NavDropdown>
          <NavDropdown title="Menu 2" id="collapsible-nav-dropdown">
            <NavDropdown.Item>Menu Item 1</NavDropdown.Item>
            <NavDropdown.Item>Menu Item 2</NavDropdown.Item>
          </NavDropdown>
          <NavDropdown title="Menu 3" id="collapsible-nav-dropdown">
            <NavDropdown.Item>Menu Item 1</NavDropdown.Item>
            <NavDropdown.Item>Menu Item 2</NavDropdown.Item>
          </NavDropdown>
        </Nav>
        <Nav>
          <Nav.Link eventKey={2}>Log Out</Nav.Link>
        </Nav>
      </Navbar.Collapse>
</Navbar>

以下是我在App.css中仅有的CSS，用于显示ID为collapsible-nav-dropdown的菜单项颜色为白色：

#collapsible-nav-dropdown {
  color: white;
}

感谢您的帮助。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

collapsenavbarnavbarreact-bootstrapreactjsreactjsreactjsreactjstoggle