javascript - Reactstrap Navbar 右对齐项目
问题描述
正如标题中所说,我正在尽最大努力将项目与导航栏的右侧对齐,我还尝试在导航上使用 ml-auto,在项目上尝试使用 mr-auto,在项目上尝试使用 ml-auto。但是反应带应该留在左侧。示例如图所示。所以我很感谢你们的帮助,我一般来说是一个新的反应和网络开发。
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"
最好的问候
推荐阅读
- javascript - 如何使用分组选项设置 react-select 的值?
- c# - 是否可以添加链接到特定角色 mvc 的表
- java - 整数字段的 Bean 验证
- node.js - React Native 渲染适用于服务器端还是客户端?
- powershell - 使用 PowerShell 根据列标题/行标题拆分 CSV 文件中的数据
- java - 使用自签名证书生成签名
- npm - npm 需要一个对等
- java - Maven IntelliJ 错误:无法导入 Maven 项目。有关详细信息,请参阅日志
- python - Django StaticLiveServerTestCase 有时以:远程主机强制关闭现有连接
- ios - 我正在使用 timeIntervalSince1970 转换我的当前日期。我在哪个时区收到它?