html - 导航栏中的徽标和菜单未对齐反应引导

Question

徽标和菜单，选项卡垂直显示，而不是彼此相邻。我希望徽标应该出现在左角，而其他选项卡和菜单应该出现在中间。代码链接

import React from "react"
import { Link } from "react-router-dom"
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {faBars} from "@fortawesome/free-solid-svg-icons"

const Navbar = () => {
    return (
<nav className="navbar navbar-expand-lg navbar-light bg-dark">
<div className="contianer" >

  <Link className="navbar-brand" to="/Home"> Post your brand here</Link>
  <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <FontAwesomeIcon icon={faBars} style={{color:"#fff"}}/>
  </button>
  
  <div className="collapse navbar-collapse" id="navbarSupportedContent">
    <ul className="navbar-nav ">
      <li className="nav-item active">
        <Link className="nav-link" to="/Home"> Home <span className="sr-only"></span></Link>
      </li>
      <li className="nav-item">
        <Link className="nav-link" to="/About">About</Link>
      </li>
      <li className="nav-item">
        <Link className="nav-link" to="/Services">Services</Link>
      </li>
      <li className="nav-item">
        <Link className="nav-link" to="/Contacts">Contacts</Link>
      </li>
    </ul>
  </div>
  </div>  
</nav>
  )
}

export default Navbar

我在此链接中添加了 CSS 代码`。在这里，我继承了所有重要的标签，但仍然在我的整个代码中发现对齐问题。请仔细阅读它，帮助将是可观的。

标签： htmlcssreactjsbootstrap-4