使用pullRight道具溢出右浮动导航|反应-引导/反应

Question

这里是我的超级基本反应成分呈现使用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> 
); 
} 

我希望我的导航链接是正确的浮动，但不幸的是下面的反应，引导文件和添加pullRight道具到Nav元素使右浮动的导航栏溢出。

我可以很容易地通过给浮动资产净值的ID和-30px的保证金左右解决这个问题，但我宁愿没有，因为实际的文档表现出很好的工作的例子。 我怎样才能获得导航与pullRight道具本身设NavBar很好的位置？

这里的显示问题的图像：

Answer 1

看着你似乎遵循文档和示例，它看起来像你省略了用于可折叠导航栏的导航包装组件Navbar.Collapse。尝试添加成分，像这样：

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