Question

我使用下面的导航栏，我希望它以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>

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

谢谢！

Answer 1

幸运的是，我从TheSharpieOne得到了反应堆的github的答案。如果要将断点从xs（这是在Navbar上使用toggleable时的默认值）更改为其他内容（如sm），则可以提供所需的断点：

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

折叠导航栏然后快576px

1 个答案: