React-Bootstrap拉右导航栏
ita*_*ied 12 html reactjs react-bootstrap
我正在使用react-bootstrap我的网站样式.我想添加Navbar所有元素镜像到右边的位置.
export default class XNavbar extends React.Component {
render() {
return (
<Navbar inverse fluid >
<Navbar.Header>
<Navbar.Brand>
<a href="#">Brand</a>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="#">Hello</NavItem>
<NavItem eventKey={2} href="#">World</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
)}
}
结果是
但我真正希望它是什么
[ World Hello Brand ]
我试着用pullRight的<Navbar,但没有奏效.我也补充说<html dir="rtl">,但这也没有帮助.我该怎么做？
Ard*_*ram 21
对于那些像我一样找不到pullRight工作的人，似乎添加ml-auto工作更好。
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Nav.Link href="#one">One</Nav.Link>
<Nav.Link href="#two">Two</Nav.Link>
</Nav>
</Navbar.Collapse>
在这里找到解决方案：https : //stackoverflow.com/a/54684784/95552
Rya*_*Ore 13
如果您还没有想到这一点,或者其他人偶然发现它.您应该做的就是将pullRight道具添加到实际的Nav组件中.结果应该是左侧的品牌标识,导航向右拉.
return (
<Navbar inverse fluid >
<Navbar.Header>
<Navbar.Brand>
<a href="#">Brand</a>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
<NavItem eventKey={1} href="#">Hello</NavItem>
<NavItem eventKey={2} href="#">World</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
)}
- `pullRight`对我不起作用，但是`className =“ ml-auto”`有效。在此处找到解决方案：/sf/answers/3827934911/ (2认同)
您可以将元素放入 div 中，然后通过此 css 属性将 div 向右浮动
.exampleDiv {
float: right;
}