将Navbar Bootstrap居中最干净的方法

Question

我真的很期待任何帮助！

我非常努力地获得带有引导程序的导航栏，该导航栏显示： 1.我的名字（Navbar品牌）在确切的中心， 2.右侧的LinkedIn徽标， 3.和左侧的两个可折叠链接。

当屏幕小于引导程序“ sm”的断点时，我想折叠左侧的两个链接，但让品牌保持居中，并且不应该隐藏linkedIn徽标。

在这一点上，我有很多解决方案和不同的代码，所有这些都以一种或另一种方式出现了一个问题。以下是一些屏幕截图：

我知道在线居中导航栏有多种解决方案，但没有一个能满足我的需求，可惜我无法从中选择所需的东西。让我们在这一点上说，我完全没有引导程序或响应式Web开发的经验。我对5年前的一些网站只有基本的了解。

我非常满意一个非常干净，简单的解决方案，而无需额外的CSS或绝对定位，因为我非常肯定使用所提供的工具是有可能的，可悲的是我不知道如何以及为什么，在此之后我感到非常沮丧一个星期的尝试。 ：D

因此，谢谢大家的帮助！

这是我最新的代码迭代，我使用bootstrap 4.2：

<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarWebsite">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="flex-grow-1">   
     <ul class="navbar-nav collapse navbar-collapse" id="navbarWebsite">
          <li class="nav-item">
            <a class="nav-link" href="#">Work<span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-    expanded="false">About</a>
           <div class="dropdown-menu" aria-labelledby="navbarDropdown">
             <a class="dropdown-item" href="#">My Name</a>
             <a class="dropdown-item" href="#">Contact</a>
            </div>
          </li>
     </ul>
    </div>
      <a class="navbar-brand flex-grow-1 text-center active" href="index.html">My Name</a>
      <a target="_blank" class="flex-grow-1 text-right nav-link" href="http://www.linkedin.com/in/"><img src="img/LN_Logo.png"></a>