Reactstrap Navbar 右对齐项目
Reactstrap Navbar align items right
如标题中所述,我正在尽力将项目对齐到导航栏的右侧
我还尝试了 ml-auto 导航和 mr-auto 项目以及 ml-auto 项目。但 reactstrap 应该留在左侧。 Example 如图所示。所以我很感激你们的帮助,我是一个新的反应和一般的网络开发。
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"
此致
偏差
如标题中所述,我正在尽力将项目对齐到导航栏的右侧 我还尝试了 ml-auto 导航和 mr-auto 项目以及 ml-auto 项目。但 reactstrap 应该留在左侧。 Example 如图所示。所以我很感激你们的帮助,我是一个新的反应和一般的网络开发。
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"
此致 偏差