如何使 Bootstrap Navbar 元素内联？

Question

我实际上不知道这里出了什么问题是代码中的一些引导错误我有错误的版本还是什么？ 我认为 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;

Answer 1

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