Bootstrap 4 折叠的导航栏品牌未居中

Question

我正在尝试让品牌商品和导航商品在移动设备视图中对齐。

Mobile view --> Aling wrong. Not centered. "Brand" should be vertically aligned with "link1-3"
Desktop view --> Aling should be like this

我试过不同的东西，但运气不好。
但是没用。

我的自动取款机密码：Codeply.com

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
      <a href="#" class="navbar-brand mx-auto">Brand</a>    
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>   
    <div class="collapse navbar-collapse justify-content-end nav-justified" id="navbarNav">
      <div class="navbar-nav">
        <a class="nav-item nav-link active" href="#">Link 1<span class="sr-only">(current)</span></a>
        <a class="nav-item nav-link" href="#">Link 2</a>
        <a class="nav-item nav-link" href="#">Link 3</a>
      </div>
    </div>
</nav>

我需要做什么才能使品牌项和导航项保持一致？

---

编辑 1： 更新了 1. 图片并更好地描述了我正在努力实现的目标。

Edit2: 找到解决方案！ 我得到的每一个答案都解决了我的问题。但是 dmbaughman 的 回答最简单并且不会干扰网站上的其他内容。

Answer 1

因为你使用的是 mx-auto 并且它工作正常，所以屏幕开始和右边按钮之间的中心有点早......查看 jpeg 你会看到它现在居中，因为我删除按钮 mx-auto 找到两个元素之间的中心.... 所以乍一看你可以使用百分比形式的边距样式并在右边移动一点品牌...... 再见

这能解决您的问题吗？

这样换一个牌子

               <a href="#" class="navbar-brand mx-auto"><span style="margin-left:50%">Brand</span></a>

结果

Answer 2

问题是 .navbar-brand link 没有下面的 link 宽，因为它与右边的菜单图标共享 space。如果您只是使菜单图标绝对定位，它将从文档流中删除并且 brand/links 将正确对齐。

当前

将这些样式添加到 .navbar-toggler

.navbar-toggler {
  position: absolute;
  top: 8px;
  right: 16px;
}

结果