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

Question

如何使用 react-bootstrap 设置 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 导致屏幕改变 (hide/show)。我建议查看 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;
    }
}

工作反应-bootstrap示例： https://codepen.io/Yasinuzun/pen/MQWLNz

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

Set custom collapse width for react-bootstrap NavBar

react-bootstrap