我正在使用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>
)}
}
Run Code Online (Sandbox Code Playgroud)
但我真正希望它是什么
[ World Hello Brand ]
Run Code Online (Sandbox Code Playgroud)
我试着用pullRight的<Navbar,但没有奏效.我也补充说<html dir="rtl">,但这也没有帮助.我该怎么做?
我正在使用reactstrap并一直关注此链接:
https://reactstrap.github.io/components/navbar/
在示例中,<nav className='ml-auto' navbar>正在<NavItem>向右推.但是,我正在尝试实现的(这与示例非常相似)是<NavItem>正在渲染的旁边<NavbarBrand>.
我已经检查了100次语法,看起来是正确的.我拥有的自定义CSS,它很少,似乎没有覆盖任何东西.控制台中的CSS看起来非常相似,它似乎受到以下因素的影响:
.ml-auto, .mx-auto {
margin-left: auto!important;
}
Run Code Online (Sandbox Code Playgroud)
至少在示例中将其切换到控制台中,将其移到我应用程序中的<NavItem>旁边<NavbarBrand>(我不想要).以下是我要看的内容:
Reactstrap示例(正确的间距):
如何在我的应用程序中获得正确的间距?
我真的不清楚影响margin-left: auto !important一个人而不是另一个人的工作.