我有以下代码用于 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;
