在 576px 之前折叠导航栏

Question

我使用下面的导航栏，我希望它在 768 像素处折叠。我尝试使用 css，但是如果我将任何显示属性强制显示在 <Collapse /> 上，我会破坏模块。

<Navbar fixed={`top`} inverse toggleable className={"navfix bg-brown"} >
      <NavbarToggler right onClick={this.toggle} className=""/>
      <NavbarBrand href="/" className={'mx-auto'}><br /><div className="text-center logo">
        <img className="logoImg" src={"../pictures/brand/brand.png"} alt="B54 Cafe, Bistro & Bakery"/>
      </div></NavbarBrand>
    <Collapse isOpen={this.state.isOpen} navbar className={"toggler "}>
        <Nav className="ml-auto" navbar>
          <div className="static">
            <NavItem>
              <NavLink to={'/'} exact activeClassName="active" tag={RRNavLink}>Homepage</NavLink>
            </NavItem>
            <NavItem>
              <NavLink to={'/about'} activeClassName="active" tag={RRNavLink}>About</NavLink>
            </NavItem>
          </div>
          {Object.keys(this.props.meals).map((types, index) =>
            <NavItem key={types+index}>
              <NavLink
                to={'/'+types.normalize('NFD').replace(/[\u0300-\u036f]/g, "")} activeClassName="active" tag={RRNavLink}>
                {types}
              </NavLink>
            </NavItem>
            )
          }
        </Nav>
      </Collapse>
    </Navbar>

你是怎么解决reactstrap这个问题的？如果您认为我应该考虑其他方法，我会洗耳恭听。这是一个关于该项目的 github 页面，您可以看到导航栏如何折叠以及 reactstrap 如何在 576px 之前将 css 应用到 "navbar-collapse"，以及 display: flex!important; 如何应用 bootstrap 576px之后。如果我强制显示属性到 "collapse" 或 "navbar-collapse"。我 ovverride css reactsrap 适用所以我打破了模块。我不想重写 bootstrap.min.css，我正在寻找替代方案。 githubPage from the website

谢谢！

Answer 1

幸运的是，我在 Reactstrap 的 github 上得到了 TheSharpieOne 的答复。如果您想将断点从 xs（这是您在导航栏上使用 toggleable 时的默认值）更改为其他内容（如 sm），您可以提供所需的断点：

<Navbar toggleable="sm">
  // ...
</Navbar>

在 576px 之前折叠导航栏

Collapse navbar sooner then 576px

reactjs

reactstrap