[英]ReactJS: Bootstrap4 NavBar with collapse and non-collapse items
There's an out-the-box solution for getting a collapsible horizontal NavBar:有一个开箱即用的解决方案来获得可折叠的水平导航栏:
<Navbar inverse fixedTop fluid collapseOnSelect>
<Navbar.Header>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<LinkContainer to={'/'} exact>
<NavItem>
<Glyphicon glyph='home' /> CollapseLink1
</NavItem>
</LinkContainer>
<LinkContainer to={'/'}>
<NavItem>
<Glyphicon glyph='education' /> CollapseLink2
</NavItem>
</LinkContainer>
<LinkContainer to={'/'}>
<NavItem>
<Glyphicon glyph='th-list' /> CollapseLink3
</NavItem>
</LinkContainer>
</Nav>
</Navbar.Collapse>
</Navbar>
This gives a horizontal menu on large screens:这在大屏幕上提供了一个水平菜单:
And a vertical menu on small screens:以及小屏幕上的垂直菜单:
But suppose I want to add a couple of icon buttons, which should always stay top-right regardless of what's going on:但是假设我想添加几个图标按钮,无论发生什么,它们都应该始终保持在右上角:
I've read examples of separating the collapsible from the non-collapsible items, and they all get very awkward very quickly.我读过将可折叠物品与不可折叠物品分开的例子,它们很快就变得非常尴尬。 This must be a common requirement, is there no out-the-box approach?
这一定是一个普遍的要求,有没有开箱即用的方法?
What's a good method of structuring this design?构建此设计的好方法是什么?
You can use 'position:absolute' to control the 2 links that you're looking to style & place...您可以使用 'position:absolute' 来控制您要设置样式和放置的 2 个链接...
relevant js :相关js :
class App extends Component {
constructor() {
super();
this.toggle = this.toggle.bind(this);
this.state = {
isOpen: false,
name: 'React'
};
}
toggle() {
this.setState({
isOpen: !this.state.isOpen
});
}
render() {
return (
<div>
<Navbar color="light" light expand="md">
<NavbarToggler onClick={this.toggle} />
<Collapse isOpen={this.state.isOpen} navbar>
<Nav navbar>
<NavItem>
<NavLink href="/components/"> Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret>
Options
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>
Option 1
</DropdownItem>
<DropdownItem>
Option 2
</DropdownItem>
<DropdownItem divider />
<DropdownItem>
Reset
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</Collapse>
<NavbarBrand href="/" className='floatRight'>
<a href="#">[link A]</a>
<a href="#">[link B]</a>
</NavbarBrand>
</Navbar>
<Hello name={this.state.name} />
<p>
Start editing to see some magic happen :)
</p>
</div>
);
}
}
relevant css :相关css :
.floatRight{ position: absolute; right: 0; top: 6px;}
.floatRight a{ padding-left:10px;}
.navbar{padding:0;}
.navbar-light .navbar-toggler {margin:10px}
complete working stackblitz here在这里完成工作堆栈闪电战
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.