时间戳

首页 > 解决方案 > React Bootstrap NavDropdown alignRight 不起作用

reactjs - React Bootstrap NavDropdown alignRight 不起作用

问题描述

我正在使用 react bootstrap 并尝试将 NavBar 菜单向右对齐

<Nav className="ml-auto paddingLeft5" alignRight>
    <NavDropdown title="Account" id="basic-nav-dropdown" alignRight>
        <NavDropdown.Item href="/privacySettings">Privacy Settings</NavDropdown.Item>
        <NavDropdown.Item href="/signOut">Sign Out</NavDropdown.Item>
    </NavDropdown>
    <NavDropdown title="Help" id="basic-nav-dropdown" alignRight>
        <NavDropdown.Item href="/contactUs">Contact us</NavDropdown.Item>
        <NavDropdown.Item href="/termsAndConditions">Terms and Conditions</NavDropdown.Item>
    </NavDropdown>
</Nav>

然而，这似乎不起作用。我正在使用“react-bootstrap”：“^1.0.0-beta.10”、“react-dom”：“^16.8.4”和“bootstrap”：“^4.3.1”。

结果可以在附图中看到。在此处输入图像描述

我无法将菜单向右对齐，任何帮助将不胜感激。

标签： reactjsbootstrap-4react-bootstrap

解决方案

import { Navbar, Nav, NavDropdown } from 'react-bootstrap'
<Nav className="ml-auto">
<NavDropdown alignRight title="Profile" id="collasible-nav-dropdown" >
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
</NavDropdown>
</Nav>

使用命令手动终止端口号，netstat -ntlp然后使用kill -9 <port number>并使用npm start.

推荐阅读