加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

为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示例:
https://codepen.io/Yasinuzun/pen/MQWLNz

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读