Tepkime önyükleme için özel daraltma genişliğini ayarlama NavBar

Question

Nav-Pack'in tepki-önyükleme kullanarak çökmesi gereken değeri nasıl ayarlarsınız? İnternette bulduğum bir şeyle çalışmam mümkün görünmüyor. Örneğin, şu an 768px'de çökmekte olan ancak 850px'de çökmesini istiyorum.

<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

Bu aslında tepki sorun değildir ama Bootstrap.css ekranında (göstermek/gizlemek) değiştirilmesini neden olur. Ben bootstrap.css bakmak ve aşağıdaki bazı .nav sınıflarını bulacaksınız aşağıdaki @media (min-width: 768px) bulmak için tavsiye ederiz.

Answer 2

Bu boostrap.css sorunu tepki vermiyor, Sorununuzu çözmelisiniz.

@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; 
    } 
} 

Çalışma reaksiyona-önyükleme örnek: https://codepen.io/Yasinuzun/pen/MQWLNz