Đặt chiều rộng thu gọn tùy chỉnh cho phản ứng-bootstrap NavBar

Question

Làm cách nào để bạn đặt giá trị tại đó NavBar sẽ thu gọn bằng phản ứng-bootstrap? Tôi không thể làm cho nó hoạt động với bất cứ thứ gì tôi tìm thấy trực tuyến.

Ví dụ: hiện tại nó đang thu hẹp ở mức 768px nhưng tôi muốn thu gọn ở mức 850px.

<Navbar inverse collapseOnSelect> 
<Navbar.Header> 
    <Navbar.Brand> 
     <a className='navItem' href="#" id='name_badge'><Link to='/'>asdf</Link></a> 
    </Navbar.Brand> 
    <Navbar.Toggle /> 
</Navbar.Header> 
<Navbar.Collapse> 
<Nav> 
    <NavItem className='navItem hvr-wobble-skew' eventKey={1} href="#"><Link to='/about'>About</Link></NavItem> 
    <NavItem className='navItem hvr-wobble-skew' eventKey={2} href="#"><Link to='/projects'>Projects</Link></NavItem> 
    <NavItem className='navItem hvr-wobble-skew' eventKey={3}><Link to='/skills'>Skills</Link></NavItem> 
    <NavItem className='navItem hvr-wobble-skew' eventKey={3}><Link to='/contact'>Contact</Link></NavItem> 
</Nav> 
<div className="pullRight"> 
    <Nav> 
     <Navbar.Text> 
      <Navbar.Link target='_blank' href="https://www.facebook.com/pages/bla"><FaInstagram size={30}/></Navbar.Link> 
     </Navbar.Text> 
     <Navbar.Text> 
      <Navbar.Link target='_blank' href="https://www.facebook.com/pages/ad"><FaFacebookSquare size={30}/></Navbar.Link> 
     </Navbar.Text> 
     <Navbar.Text> 
      <Navbar.Link target='_blank' href="https://www.facebook.com/pages/fd"><FaGithubAlt size={30}/></Navbar.Link> 
     </Navbar.Text>      
    </Nav> 
</div> 
</Navbar.Collapse> 
</Navbar> 

Answer 1

Đây thực sự không phải là vấn đề phản ứng nhưng Bootstrap.css làm thay đổi màn hình (ẩn/hiện). Tôi khuyên bạn nên xem qua các bootstrap.css và tìm thấy @media (min-width: 768px) sau đây bạn sẽ tìm thấy một số lớp .nav ở đó.

Answer 2

Đây là vấn đề về boostrap.css không phản ứng, Điều này sẽ giải quyết được sự cố của bạn.

@media (max-width: 850px) { 
    .navbar-header { 
     float: none; 
    } 
    .navbar-toggle { 
     display: block; 
    } 
    .navbar-collapse { 
     border-top: 1px solid transparent; 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
    } 
    .navbar-collapse.collapse { 
     display: none!important; 
    } 
    .navbar-nav { 
     float: none!important; 
     margin: 7.5px -15px; 
    } 
    .navbar-nav>li { 
     float: none; 
    } 
    .navbar-nav>li>a { 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 
    .navbar-text { 
     float: none; 
     margin: 15px 0; 
    } 
    .navbar-collapse.collapse.in { 
     display: block!important; 
    } 
    .collapsing { 
     overflow: hidden!important; 
    } 
} 

Working dụ phản ứng-bootstrap: https://codepen.io/Yasinuzun/pen/MQWLNz