Javascript 如何使导航条元素内联？

我真的不知道这里出了什么问题是代码中有引导错误吗？我的版本错了吗？ 我认为align items center应该这样做，我不知道为什么不这样做。请不要告诉我让元素显示：内联或内联块，它不起作用。 代码如下：

import React, { Component } from "react";
import { Link } from "react-router-dom";
import logo from "../logo.svg";
import styled from "styled-components";
import { ButtonContainer } from "./Button";

export class Navbar extends Component {
  render() {
    return (
      <NavWrapper className="navbar navbar-dark ">
        <Link to="/">
          <img src={logo} alt="store" className="navbar-brand " />
        </Link>
        <ul className="navbar-nav align-items-center">
          <li className="nav-item ">
            <Link to="/" className="nav-link">
              products
            </Link>
          </li>
        </ul>
        <Link to="/cart" className="ml-auto">
          <ButtonContainer>
            <span className="mr-2">
              <i className="fas fa-cart-plus" />
            </span>
            my cart
          </ButtonContainer>
        </Link>
      </NavWrapper>
    );
  }
}

const NavWrapper = styled.nav`
  background: var(--mainBlue);
  .nav-link {
    color: var(--mainWhite);
    fontsize: 1.3rem;
    text-transform: capitalize;
  }
`;

export default Navbar;

import React，{Component}来自“React”；
从“react router dom”导入{Link}；
从“./logo.svg”导入徽标；
从“样式化组件”导入样式化；
从“/Button”导入{ButtonContainer}；
导出类导航栏扩展组件{
render（）{
返回(


产品


我的购物车
);
}
}
const NavWrapper=styled.nav`
背景：var（--mainBlue）；
.导航链路{
颜色：var（--mainWhite）；
字体大小：1.3rem；
文本转换：大写；
}
`;
导出默认导航栏；

很抱歉耽误了您的时间，我刚刚重新安装了引导程序，它可以正常工作…

您使用的是什么版本的引导程序？@JasonTowne v4.0.0-alpha.6为什么使用这么旧的alpha版本？