축소 navbar sooner then 576px

Question

아래의 navbar를 사용하여 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 페이지는 navbar가 어떻게 축소되는지, 그리고 reactstrap이 CSS를에 576px 전에 적용하는 방법과이 576px 이후에 부트 스트랩에 의해 어떻게 적용되는지를 볼 수 있습니다. 디스플레이 속성을 "collapse" 또는 "navbar-collapse"으로 강제로 설정하면 내가 css reactsrap 적용 ovverride 그래서 모듈을 깰. bootstrap.min.css를 재 작성하고 싶지 않고 대안을 찾고 있습니다. githubPage from the website

고맙습니다!

Answer 1

운 좋게도 반응 스트랩의 github에 TheSharpieOne의 답변이 있습니다. 당신이 중단 점을 제공 할 수있다 (SM 같은) 뭔가 다른 XS에서 중단 점을 (당신이 Navbar의에 토글 사용하는 기본 인) 변경하려면 은 당신이 원하는 :

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