Question

掌握Bootstrap 4，特别是响应式菜单。我已经实现了，并且广泛地从他们的文档中读取了EXACT代码，如下所示，但是有一个问题：

<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修改，但仍然没有任何线索。

我是否遗漏了一些令人尴尬的基本尝试设置它？任何人都可以解释为什么我从这段代码中看到反向和无效的导航栏？ Navbar是我使用这个框架的最大原因，所以真的想让它工作并理解它！提前感谢您的提示和建议。

这里的参考是Bootstrap 4 Navbar page

Answer 1

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

Navbar类可切换已更改为展开。

在您的navclass上进行一次更改，您将看到差异。

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

Answer 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

Bootstrap 4中的Navbar反转并切换为非活动状态

2 个答案: