尽快折叠导航栏 576px答案

【问题标题】：Collapse navbar sooner then 576px尽快折叠导航栏 576px
【发布时间】：2018-03-02 03:00:17
【问题描述】：

我使用下面的导航栏，我希望它在 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"，以及在 576px 之后引导程序如何应用display: flex!important;。如果我将显示属性强制到"collapse" 或"navbar-collapse"。我覆盖了 css reactsrap 应用，所以我破坏了模块。我不想重写 bootstrap.min.css，我正在寻找替代方案。 githubPage from the website

谢谢！

【问题讨论】：

标签： reactjs reactstrap

【解决方案1】：

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

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

【讨论】：