为react-bootstrap NavBar设置自定义折叠宽度

如何使用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

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...