为react-bootstrap NavBar设置自定义折叠宽度
发布时间:2020-12-15 20:44:25 所属栏目:百科 来源:网络整理
导读:如何使用react-bootstrap设置NavBar应折叠的值?我似乎无法使用我在网上找到的任何东西. 例如,它目前在768px下崩溃,但我希望它在850px下崩溃. Navbar inverse collapSEOnSelectNavbar.Header Navbar.Brand a className='navItem' href="#" id='name_badge'Li
如何使用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示例: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |