bootstrap 4 如何让按钮在导航里居中

有个关于bootstrap 4导航的问题，我想让logo居左，“个人中心”右对齐，然后导航按钮居中，但当切换到手机浏览的时候，点击导航按钮后它就突然跑到右边了。代码如下：

<nav class="navbar navbar-expand-md navbar-light" >
    <div class="container"> <a class="navbar-brand text-primary" href="#">
        <i class="fa d-inline fa-lg fa-stop-circle"></i>
        <b> BRAND</b>
      </a> <button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse" data-target="#navbar4">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbar4">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item bg-white border-success"> <a class="nav-link" href="#">Features</a> </li>
          <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li>
          <li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
          <li class="nav-item"> <a class="nav-link" href="#">FAQ</a> </li>
        </ul> 
      </div>
      <span> <a class="btn navbar-btn ml-md-2 btn-light bg-info">个人中心</a></span>
    </div>

  </nav>

查看更多