引导导航栏切换器

Question

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

<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 断点时，导航栏切换器都会粘在 navbar-brand 链接元素上——就像它向左对齐一样。 我已经尝试了我能想到的一切。 基本上，我想要发生的是，一旦我的页面到达断点并且各种列表项被隐藏，我希望导航栏切换器与页面的右侧对齐。 现在，它看起来像左对齐，基本上我所做的一切都没有覆盖这种行为。

我尝试添加 navbar-toggler-right，我尝试提供自定义 ID 以覆盖可能浮动的行为：正确；重要； --

导航栏行为

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

Answer 1

只需更改此行

<nav class="nav navbar-expand-sm navbar-dark">

至

<nav class="navbar navbar-expand-sm navbar-dark">

Answer 2

添加这些类

到导航栏

justify-content-between justify-content-sm-start

到 #navbarSupportedContent

flex-grow-0 flex-sm-grow-1

代码

<nav class="nav navbar-expand-sm navbar-dark justify-content-between justify-content-sm-start">
    <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 flex-grow-0 flex-sm-grow-1" 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>

更多信息在这里https://getbootstrap.com/docs/4.3/utilities/flex/#justify-content , https://getbootstrap.com/docs/4.3/utilities/flex/#grow-and-shrink