reactjs - 576px より早くナビゲーションバーを折りたたむ

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 ページです。ナビゲーション バーがどのように折りたたまれるか、reactstrap が 576px"navbar-collapse"より前に css を適用する方法、および 576px よりdisplay: flex!important;後にブートストラップによって がどのように適用されるかを確認できます。"collapse"またはに表示プロパティを強制すると"navbar-collapse"。CSS の reactsrap が適用されるのをオーバーライドするので、モジュールを壊します。bootstrap.min.css を書き換えたくないので、代替手段を探しています。 ウェブサイトの githubPage

ありがとうございました！