如何使用react-bootstrap设置NavBar应折叠的值？我似乎无法使用我在网上找到的任何东西.
例如,它目前在768px下崩溃,但我希望它在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>
这是boostrap.css问题没有反应,这应该解决你的问题.
原文链接：https://www.f2er.com/react/300831.html@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,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;
}
}
工作react-bootstrap示例：
https://codepen.io/Yasinuzun/pen/MQWLNz
