[英]Reactstrap Navbar align items right
正如標題中所說,我正在盡最大努力將項目與導航欄的右側對齊,我還嘗試在導航上使用 ml-auto,在項目上嘗試使用 mr-auto,在項目上嘗試使用 ml-auto。 但是反應帶應該留在左側。 示例如圖所示。 所以我很感謝你們的幫助,我有點新反應和 web 開發一般。
import React, { useState } from "react";
import {
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
NavItem,
NavLink,
UncontrolledDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem,
NavbarText,
} from "reactstrap";
const Example = (props) => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
return (
<div>
<Navbar color="light" light expand="sm">
<NavbarBrand href="/" className="mr-auto">
reactstrap
</NavbarBrand>
<NavbarToggler onClick={toggle} className="mr-2" />
<Collapse isOpen={isOpen} navbar>
<Nav navbar>
<NavItem>
<NavLink href="https://www.google.com">Team</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://www.google.com">Events</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret>
Unsere Beratung
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>Bipapo</DropdownItem>
<DropdownItem>TomLongSchlong</DropdownItem>
<DropdownItem divider />
<DropdownItem>Der coole Reset</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
<NavItem>
<NavLink href="https://www.google.com">Social Media</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://www.google.com">Kontakt</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>
);
};
export default Example;
這對我有用,我希望它也對你有用!
className="position-absolute top-0 end-0"
最好的問候
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.