reactjs - 使用 pullRight 属性会溢出右浮动导航 | React-Bootstrap/React

Question

这是我的 super 基本 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文档并向导航元素添加pullRight属性会使右侧 float 导航溢出。

我可以通过给右侧 float 导航一个 ID 和 -30px 的 margin-left 来轻松解决问题，但我宁愿不这样做，因为实际的文档显示了很好的工作示例。 如何使用 pullRight 属性让导航在导航栏中很好地定位？

这是显示问题的图像:

Answer 1

也许你不再需要这个了。但对于任何遇到这个问题的人来说，这里有一个可行的解决方案(它对我有用，因为“pullRight”由于某种原因也不起作用):

<Nav className="ml-auto">