Bootstrap 4 中的导航栏反转且切换不活动

Question

掌握 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

Answer 1

您链接的网站是 Bootstrap 的最新 ALPHA 版本。现在处于 BETA.

导航栏 class 可切换 已更改为展开。

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

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

Answer 2

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

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

Bootstrap 4 中的导航栏反转且切换不活动

Navbar in Bootstrap 4 reversed and toggle inactive

css

nav

navbar

twitter-bootstrap

bootstrap-4