引导导航栏切换器答案

【问题标题】：Bootstrap navbar-toggler引导导航栏切换器
【发布时间】：2019-11-18 05:23:34
【问题描述】：

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

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

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

Navbar Behavior

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

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

只需更改这一行

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

到

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

【讨论】：

【解决方案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>

【讨论】：