Question

我已经在SO上搜索了多个线程中的这个问题，这对于为什么这不起作用真是令人头疼。下面的例子（来自这个问题的SO线程）在jsFiddler中工作，但是当我从本地机器上提供它时不起作用。

因此，我将jsFiddler中的代码复制粘贴到我自己的文件中，并将该文件加载到在fiddler预览窗口中正确呈现的同一浏览器中。

我已经尝试添加！doctype html标记，并且我在标题/链接rel部分周围使用和不使用头标记进行了尝试，没有任何更改。导航栏的左侧是品牌名称和globe，然后是“link 1 link 2 link3”，然后是间隙，然后在导航栏的右侧登录/注册/注销渲染。我也尝试将其作为django页面从开发服务器服务，我已经尝试将其放在一个平面的HTML文件中并从文件系统中拖放它。我也尝试了几个非常相似的SO示例，基本结果相同。

这是我服务器上的页面： http://www.walesdata.com/test.html

以下是我如何渲染的屏幕截图： http://www.walesdata.com/Screen.png

当我看到工作示例时，我喜欢它的外观和功能，但我还没有让它在本地工作。

<!DOCTYPE html>
<html lang="en">
<title>
  Site title
</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<body>
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light">

      <a class="navbar-brand" href="#">
        <i class="fa fa-globe" aria-hidden="true"></i> Brand Name
      </a>

      <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <i class="fa fa-angle-double-down"></i>
      </button>

      <div class="navbar-collapse collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item"><a href="#" class="nav-link ">Link 1</a></li>
          <li class="nav-item"><a href="#" class="nav-link ">Link 2</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Link 3</a></li>
        </ul>
        <ul class="navbar-nav">
          <li class="nav-item"><a href="#" class="nav-link ">Sign In</a></li>
          <li class="nav-item"><a href="#" class="nav-link ">Register</a></li>
          <li class="nav-item"><a href="#" class="nav-link ">Log Out</a></li>
        </ul>
      </div>

    </nav>
  </div>

  <div class="container">
    <nav class="navbar navbar-inverse fixed-bottom text-center">
      <!--<a class="navbar-brand" href="#">Fixed bottom</a>-->
      <h6 class="text-center">Footer</h6>
    </nav>
  </div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</html>

系统信息：Mint Linux和Mozilla Firefox。来自django 2.0，也来自文件系统上的平面HTML文件。

Answer 1

在Bootstrap 4.1中，我通过手动调用JS来与onclick中的button处理程序切换来解决此问题：

    <button onclick="$('#navbar-main-collapse-1').toggleClass('collapse')" type="button">
        <i aria-hidden="true" class="fa fa-bars"/>
    </button>

此处示例：https://www.xn--javiercaon-09a.com/2018/01/servicio-atencion-cliente-social-crm-scrm.html

Answer 2

这样做的结果是导航栏折叠将呈现为笔记本电脑上的常规导航栏，然后在较小的屏幕上成为折叠版本。因此，如果您进入移动视图（在Firefox中使用Ctl + Shift + M），您将看到崩溃正确。

Bootstrap 4导航栏切换不起作用

2 个答案: