使用pullRight道具会向右浮动导航栏| React-Bootstrap /反应

Question

这是我的超级基本react组件，它使用来渲染导航栏react-bootstrap：

import React, { Component } from "react";
import { Nav, NavItem, Navbar, Grid } from "react-bootstrap";
import { LinkContainer } from "react-router-bootstrap";

export default function Header() {
  return (
    <Navbar collapseOnSelect>
      <Navbar.Header className="mr-auto">
        <Navbar.Brand>
          <LinkContainer to="/">
            <a>User Management via Redis</a>
          </LinkContainer>
        </Navbar.Brand>
        <Navbar.Toggle />
      </Navbar.Header>
      <Nav pullRight>
        <LinkContainer exact to="/">
          <NavItem>Search</NavItem>
        </LinkContainer>
        <LinkContainer to="/users">
          <NavItem>All Users</NavItem>
        </LinkContainer>
      </Nav>
    </Navbar>
  );
}

我希望导航链接正确浮动，但不幸的是，在跟随react-bootstrap文档并向pullRightNav元素添加prop时，正确的浮动导航就会溢出。

我可以通过给右浮动的导航设置一个ID和一个-30px的左边距来轻松解决问题，但是我不愿意这样做，因为实际文档显示了很好的示例。如何使用pullRight道具获得Nav，以将其很好地定位在NavBar中？

这是显示问题的图像：

Answer 1

可能您不再需要了。但是对于任何对此绊脚石的人来说，这是一个有效的解决方案（它对我有用，因为“ pullRight”由于某种原因也没有起作用）：

<Nav className="ml-auto">