प्रतिक्रिया-बूटस्ट्रैप के लिए कस्टम पतन चौड़ाई सेट करें NavBar

Question

आप उस मान को कैसे सेट करते हैं जिस पर NavBar को प्रतिक्रिया-बूटस्ट्रैप का उपयोग करके पतन करना चाहिए? मुझे लगता है कि मुझे ऑनलाइन जो कुछ भी मिला है, उसके साथ काम करने के लिए मुझे लगता है।

उदाहरण के लिए, वर्तमान में यह 768 पीएक्स पर गिर रहा है लेकिन मैं इसे 850 पीएक्स पर पतन करना चाहता हूं।

<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

यह वास्तव में एक प्रतिक्रिया समस्या नहीं है लेकिन Bootstrap.css स्क्रीन (छिपाने/शो) के परिवर्तन के कारण। मैं bootstrap.css को देखने की सलाह देता हूं और निम्न @media (min-width: 768px) ढूंढता हूं, आपको वहां कुछ .nav कक्षाएं मिलेंगी।

Answer 2

यह boostrap.css समस्या प्रतिक्रिया नहीं है, इससे आपकी समस्या हल होनी चाहिए।

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

कार्य प्रतिक्रिया-बूटस्ट्रैप उदाहरण: https://codepen.io/Yasinuzun/pen/MQWLNz