using pullRight prop overflows right floated nav | React-Bootstrap/React

问题

Here is my super basic react component that renders a navbar using 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>
  );
}

I want my navigation links to be floated right, but unfortunately following the react-bootstrap docs and adding pullRight prop to the Nav element makes the right floated nav overflow.

I can easily solve the problem by giving the right floated nav an ID and a margin-left of -30px, but I'd rather not since the actual docs show nicely working examples. How can I get the Nav with the pullRight prop to nicely position itself in the NavBar?

Here's an image showing the issue:

回答1:

Probably you don't need this anymore. But for anyone stumbling over this, here is a working solution (it worked for me, as "pullRight" didn't work either for some reason):

<Nav className="ml-auto">

回答2:

Looking at the documentation and example you seemed to follow, it looks like you omitted the nav wrapper component Navbar.Collapse which is used for a collapsible navbar. Try adding the component like so:

<Navbar collapseOnSelect>
  <Navbar.Header className="mr-auto">
    <Navbar.Brand>
      <LinkContainer to="/">
        <a>User Management via Redis</a>
      </LinkContainer>
    </Navbar.Brand>
    <Navbar.Toggle />
  </Navbar.Header>
  <Navbar.Collapse>
    <Nav pullRight>
      <LinkContainer exact to="/">
        <NavItem>Search</NavItem>
      </LinkContainer>
      <LinkContainer to="/users">
        <NavItem>All Users</NavItem>
      </LinkContainer>
    </Nav>
  <Navbar.Collapse />
</Navbar>

来源：https://stackoverflow.com/questions/46060358/using-pullright-prop-overflows-right-floated-nav-react-bootstrap-react

标签

reactjs

react-bootstrap