1

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

谢谢！

4

1 回答 1

1

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

<Navbar toggleable="sm">
  // ...
</Navbar>
于 2017-09-21T22:36:31.453 回答