Bootstrap 4如何正确实现导航栏居中？解决品牌尺寸相关缺陷

我最近在研究Bootstrap 4里导航栏居中的实现方法时，发现用.mx-auto类可以快速达成导航栏居中的效果，整体表现不错，但这个方案存在一个容易被忽略的缺陷：导航栏左侧的品牌（Brand）元素尺寸会受到影响。

代码示例：替换.mr-auto为.mx-auto的效果 #

原导航结构（导航左对齐，品牌显示正常）

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">我的品牌名称</a>
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">首页</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">关于我们</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">服务</a>
      </li>
    </ul>
  </div>
</nav>

修改后（导航居中，但品牌被挤压）

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">我的品牌名称</a>
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav mx-auto"> <!-- 将.mr-auto替换为.mx-auto -->
      <li class="nav-item active">
        <a class="nav-link" href="#">首页</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">关于我们</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">服务</a>
      </li>
    </ul>
  </div>
</nav>

缺陷说明 #

当把<ul>标签上的.mr-auto替换成.mx-auto后，导航项确实会在导航栏的可用空间内左右居中，但.mx-auto添加的左右自动外边距会挤占品牌元素的可用宽度。如果品牌名称较长，就容易出现文本换行、被截断的情况，在响应式布局下这个问题会更明显。

内容的提问来源于stack exchange，提问作者Barrosy