Css 导航栏以获得水平布局

我有一个React应用程序中导航栏的以下代码。当浏览器窗口较宽时，导航栏内容看起来很好，但一旦我越过

navbar expand lg

cutoff，图标就会一个接一个地垂直对齐。我如何防止这种情况？（参见下面代码的屏幕截图）

import React，{Component}来自'React'；
进口{
徽章，
导航，
导航栏，
纳瓦巴兰，
纳瓦巴托格勒，
纳维坦，
导航链接，
}来自“反应带”；
从“@fortawesome/react FontAwesome”导入FontAwesome；
类头扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
标志
5.
5.
5.
);
}
}
导出默认标题；

---

只需将

navbar expand lg

替换为

navbar expand

要实现所需功能，需要使用

flex row

类将通常的灵活列转换为灵活行

以下是导航栏的完整工作代码，包括两个汉堡菜单（我用

d-lg-none

类隐藏了

lg

屏幕上的右菜单项）：

你还想使用移动折叠菜单吗？@ZimSystem:不，汉堡图标将用于触发左右侧栏。当我删除

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;