我在 NavBar 中有一个下拉菜单,我希望它右对齐。我在下拉菜单中添加了
end
,但它显示不正确。下拉内容仍然与切换的左侧对齐,并且显示在页面边界之外。
import "./styles.scss";
import {
Collapse,
Navbar,
NavbarToggler,
Nav,
NavItem,
NavLink,
NavbarBrand,
UncontrolledDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem
} from "reactstrap";
import Link from "react-router-dom";
import { useState } from "react";
export default function App() {
const [isOpen, setIsOpen] = useState(false);
return (
<div className="App">
<Navbar color="light" light expand="md">
<NavbarBrand href="#">Brand</NavbarBrand>
<NavbarToggler
onClick={() => setIsOpen(!isOpen)}
aria-label="Toggle navigation"
/>
<Collapse isOpen={isOpen} navbar>
<Nav className="ms-auto" navbar>
<NavItem>
<NavLink href="#" passHref>
Link
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret>
Hi user
</DropdownToggle>
<DropdownMenu end>
<DropdownItem tag={Link} href="/account" passHref>
Account settings
</DropdownItem>
<DropdownItem tag={Link} href="/account" passHref>
Other stuff
</DropdownItem>
<DropdownItem divider />
<DropdownItem>
<NavLink>Logout</NavLink>
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</Collapse>
</Navbar>
</div>
);
}