[英]Reactstrap Navbar align items right
as said in the title I'm trying my best to align the items to right side of the navbar I tried also ml-auto on Nav and mr-auto on items and ml-auto on items.正如标题中所说,我正在尽最大努力将项目与导航栏的右侧对齐,我还尝试在导航上使用 ml-auto,在项目上尝试使用 mr-auto,在项目上尝试使用 ml-auto。 But the reactstrap should stay on the left side.
但是反应带应该留在左侧。 Example As seen on the picture.
示例如图所示。 So I would appreciate help from you guys, I'm kinda new react and web development in general.
所以我很感谢你们的帮助,我有点新反应和 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;
This just worked for me I hope it will work for you too!这对我有用,我希望它也对你有用!
className="position-absolute top-0 end-0"
Best regards Bias最好的问候
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.