Bootstrap 4中的导航栏反转并切换为非活动状态答案

【问题标题】：Navbar in Bootstrap 4 reversed and toggle inactiveBootstrap 4中的导航栏反转并切换为非活动状态
【发布时间】：2018-03-11 16:32:04
【问题描述】：

掌握 Bootstrap 4，尤其是响应式菜单。我已经实现，并且广泛从他们的文档中阅读了如下的确切代码，但有一个问题：

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <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 disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

导航栏显示为反向（屏幕右侧的图标，左侧的菜单切换），并且切换按钮不执行任何操作，并且默认情况下实际上是折叠的。我在Codepen 中尝试过，同样的事情发生了，我还在 Chrome 开发工具中尝试了无数的 CSS 修改，但仍然没有任何线索。

我是否错过了一些令人尴尬的基本设置？谁能解释为什么我从这段代码中看到一个反向且不活动的导航栏？导航栏是我使用这个框架的最大原因，所以我真的很想让它工作并理解它！提前感谢您的提示和建议。

参考Bootstrap 4 Navbar page

【问题讨论】：

标签： css twitter-bootstrap navbar bootstrap-4 nav

【解决方案1】：

您链接到的网站是最新的 ALPHA 版本的 Bootstrap。它现在处于测试版。

导航栏类 toggleable 已更改为 expand。

对您的导航类进行一项更改，您就会看到不同之处。

这是您应该访问以供参考的页面 https://getbootstrap.com/docs/4.0/components/navbar/

【讨论】：

【解决方案2】：

您添加到 Codepen 的样式表适用于 4.0.0-beta 版。但是您使用的标记来自 alpha 版本的文档。要使导航栏徽标和按钮出现在正确位置，请将您当前的外部样式表替换为：

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

要使切换按钮在单击时显示折叠的元素，请添加以下 JavaScript 依赖项：

https://code.jquery.com/jquery-3.1.1.slim.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js

【讨论】：