Question

我使用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">，但这也没有帮助。我该怎么办？

Answer 1

如果您还没有想到这一点，或者其他人偶然发现它。您应该做的就是将 pullRight 道具添加到实际的导航组件中。结果应该是左侧的品牌标识，导航向右拉。

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>
)}

Answer 2

对于像我这样的人，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

Answer 3

实际上，根据Bootstrap React pullRight的文档应该这样做。但是我也没有意识到。我找到了描述here的有效解决方案。

Answer 4

您可以将您的元素放在div中，而不是通过此css属性将div浮动到右侧

.exampleDiv {
   float: right;
 }

React-Bootstrap拉右导航栏

4 个答案: