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