React-Bootstrap 拉右导航栏答案

【问题标题】：React-Bootstrap pull right navbarReact-Bootstrap 拉右导航栏
【发布时间】：2015-12-04 09:07:02
【问题描述】：

我正在使用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 ]

我尝试在<Navbar 上使用pullRight，但没有成功。我还添加了<html dir="rtl">，但这也没有帮助。我该怎么做？

【问题讨论】：

您是否尝试将pullRight 添加到Navbar.Header？
是的，它什么也没做。我尝试将pullRight 添加到上述代码中的每个元素中。
有趣。 documentation 表示它应该应用于 Nav 元素。
你能在这个小提琴中更新你的代码吗jsfiddle.net/t9sf5u9n
我不知道如何添加反应组件，因为我也在使用babel 和webpack..

标签： html reactjs react-bootstrap

【解决方案1】：

对于像我一样无法使用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

【讨论】：

【解决方案2】：

如果您还没有弄清楚这一点，或者其他人偶然发现了它。您所要做的就是将 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>
)}

【讨论】：

我试过这样做，但结果页面看起来像this。知道为什么会这样吗？我很确定我没有任何可能影响位置的 CSS...
抱歉 @pfincent ，我想我需要查看您的代码或页面的实时链接。
pullRight 对我不起作用，但 className="ml-auto" 对我有用。在这里找到解决方案：stackoverflow.com/a/54684784/95552
我认为<Nav.Item>Menu Item</Nav.Item> 是正确的语法。

【解决方案3】：

其实根据 Bootstrap React pullRight 的文档应该可以做到。但我也无法意识到。我找到了一个可行的解决方案，我描述了here。只需使用<Nav className="ml-auto">

【讨论】：

pullRight 对我不起作用，但 className="ml-auto" 对我有用。在这里找到解决方案：stackoverflow.com/a/54684784/95552
好吧，您指向的链接与我相同。不知道为什么这是必要的......

【解决方案4】：

你可以将你的元素放在一个 div 中，然后通过这个 css 属性将 div 浮动到右边

.exampleDiv {
   float: right;
 }

【讨论】：

它也不好用。它将exampleDiv 向右缩小，并将每个元素放在不同的行中。
你能创建一个jsfiddle吗