【发布时间】：2018-07-02 16:11:41
【问题描述】：
我有以下代码用于 React 应用程序中的导航栏。当浏览器窗口很宽时，导航栏内容看起来不错，但是一旦我越过navbar-expand-lg 截止，图标就会垂直对齐。我该如何防止呢？ （见下方代码截图）
import React, {Component} from 'react';
import {
Badge,
Nav,
Navbar,
NavbarBrand,
NavbarToggler,
NavItem,
NavLink,
} from 'reactstrap';
import FontAwesome from '@fortawesome/react-fontawesome';
class Header extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Navbar dark color="dark" expand="lg" className="w-100 p-1">
<NavbarToggler className="d-flex"/>
<NavbarBrand className="ml-3" href="/">Logo</NavbarBrand>
<Nav className="d-flex ml-auto" horizontal="end" navbar>
<NavItem>
<NavLink href="#">
<FontAwesome icon={["fas","bell"]} className="text-light" size="lg" />
<Badge pill color="danger">5</Badge>
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">
<FontAwesome icon={["fas","clipboard"]} className="text-light" size="lg" />
<Badge pill color="warning">5</Badge>
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">
<i className="icon-location-pin"></i>
<Badge pill color="info">5</Badge>
</NavLink>
</NavItem>
</Nav>
<NavbarToggler className="d-flex ml-3"/>
</Navbar>
);
}
}
export default Header;
【问题讨论】：
-
您还想使用移动折叠菜单吗？
-
@ZimSystem：不，汉堡图标将用于触发左右侧边栏。
标签： css reactjs bootstrap-4 reactstrap