有一个现成的解决方案,用于获取可折叠的水平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>
这样可以在大屏幕上显示水平菜单:
在小屏幕上还有一个垂直菜单:
但是假设我要添加几个图标按钮,无论发生什么情况,这些按钮都应始终保持右上方:
我已经阅读了将可折叠项目与不可折叠项目分开的示例,它们都变得非常笨拙。这必须是一个普遍的要求,没有现成的方法吗?
构造此设计的好方法是什么?
最佳答案
您可以使用“ position:absolute”来控制要查找样式和位置的2个链接...
相关的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>
);
}
}
相关的CSS:
.floatRight{ position: absolute; right: 0; top: 6px;}
.floatRight a{ padding-left:10px;}
.navbar{padding:0;}
.navbar-light .navbar-toggler {margin:10px}
完成working stackblitz here