无法对齐Bootstrap响应式导航栏

Question

我正在尝试创建一个响应式导航栏。

台式机版本应具有

• 左侧的徽标
• 标题和字幕居中
• 导航图标以及右侧的设置

移动版本应具有

• 没有徽标
• 左侧的汉堡包图标
• 标题居中
• 右侧的设置图标
• 汉堡包图标只能包含导航图标

导航栏上的高度也固定为50px，切换到移动设备后将其删除。

由于某些原因，移动arent中的导航按钮会下降。而且我无法将标题和导航图标分别排列在中间和右边。请指教。

手机屏幕截图：

桌面截图：

预期输出：

CodeSandBox链接：Link

代码：

    import React from "react";

    import { IconNames } from "@blueprintjs/icons";
    import { Box } from "@rebass/grid";
    import {
      Button,
      Colors,
      Icon,
      Menu,
      MenuDivider,
      MenuItem,
      Popover,
      ButtonGroup,
      Divider,
      H2
    } from "@blueprintjs/core";

    import { Navbar, Nav, Col, Container } from "react-bootstrap";

    import { Position } from "@blueprintjs/core/lib/esm/common/position";

    import { ReactComponent as LogoIcon } from "./logo.svg";

    import NavigationBar from "./NavigationBar";

    function handleLogout() {
      return null;
    }

    const Header = props => {
      const { title, subtitle } = props;

      const userSettings = () => (
        <Popover
          inheritDarkTheme={false}
          content={
            <Menu>
              <MenuItem
                tagName="div"
                text={"My Name"}
                shouldDismissPopover={false}
                icon={IconNames.USER}
                disabled
              />
              <MenuItem
                tagName="div"
                text={"email@example.com"}
                shouldDismissPopover={false}
                icon={IconNames.ENVELOPE}
                disabled
              />
              <MenuDivider />
              <MenuItem
                icon={IconNames.LOG_OUT}
                text="Log Out"
                onClick={handleLogout}
              />
            </Menu>
          }
          position={Position.BOTTOM_RIGHT}
        >
          <Button
            small
            minimal
            large
            icon={<Icon icon={IconNames.COG} color={Colors.WHITE} />}
          />
        </Popover>
      );

      return (
        <Navbar
          bg="light"
          expand="lg"
          style={{
            background: `linear-gradient(${Colors.BLUE1}, ${Colors.COBALT1})`,
            boxShadow: "none"
          }}
        >
          <Container fluid className="pt-20 pb-20">
            <Box className="order-md-0 order-1 d-none d-sm-block">
              <Navbar.Brand href="#home">
                <LogoIcon
                  style={{
                    maxWidth: "120px",
                    width: "100%",
                    height: "auto",
                    fill: Colors.WHITE
                  }}
                />
              </Navbar.Brand>
            </Box>
            <Col
              md={{ span: 4, offset: 4 }}
              className="d-flex align-items-center ml--auto p-2 order-md-1 order-0"
            >
              <Navbar.Toggle aria-controls="basic-navbar-nav">
                <Icon
                  icon={IconNames.HORIZONTAL_BAR_CHART_ASC}
                  color={Colors.WHITE}
                />
              </Navbar.Toggle>
              <Nav className="mx-auto mt-2 mt-lg-0">
                <Col>
                  <H2>{title}</H2>
                  <span>{subtitle}</span>
                </Col>
              </Nav>
              <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="mr-auto align-items-center" as="ul">
                  <Col className="d-inline-flex">
                    <NavigationBar />
                    <Divider className="border-white d-none d-sm-block" />
                    <Box className="align-self-center d-none d-sm-block">
                      {userSettings()}
                    </Box>
                  </Col>
                </Nav>
              </Navbar.Collapse>
              <Col className=".d-none .d-sm-block .d-md-none d-lg-none d-xl-none">
                {userSettings()}
              </Col>
            </Col>
          </Container>
        </Navbar>
      );
    };

    export default Header;

“导航”按钮在移动版本中应为垂直列表。请帮忙。