如何使用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问题没有反应,这应该解决你的问题.
@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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。