Bootstrap 导航栏切换器

所以，我第一次搞砸了引导程序，弄清楚事情是如何工作的。我在导航栏方面取得了很好的进展，但我对导航栏切换器感到非常困惑。

<nav class="nav navbar-expand-sm navbar-dark">
    <a class="navbar-brand" href="" id="homeOverride"> <span class="overrideFonts"> Home </span> </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">

        <li class="nav-item">
          <a class="nav-link" href=""> <span class="overrideFonts"> Projects </span> </a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href=""> <span class="overrideFonts"> Contact </span> </a>
        </li>

      </ul>
    </div>
  </nav>

似乎无论我做什么，每当页面遇到该 sm 断点时，导航栏切换器都会粘在导航栏品牌链接元素上——就像它是左对齐的，或者什么的。我已经尝试了我能想到的一切。基本上，我想要发生的是，一旦我的页面点击该断点并且隐藏了各种列表项，我希望该导航栏切换器与页面右侧对齐。现在，它看起来像左对齐，基本上我所做的没有覆盖这种行为。

我已经尝试添加导航栏-toggler-right，我尝试提供一个自定义 ID 来覆盖可能使用 float: right !important; 的行为。——

导航栏行为

我要做的就是在断点被击中时将该​​按钮移到该页面的右侧