我的汉堡菜单不起作用

Question

汉堡菜单不起作用，我不知道为什么。

我怀疑丢失了一些 JS 文件，但我不知道是哪个。

我正在使用：

Bootstrap 4（测试版，我知道
jQuery
Owl轮播

screenshot

<head>
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome/font-awesome.min.css" rel="stylesheet">
    <link href="owlcarousel/owl.carousel.min.css" rel="stylesheet">
    <link href="owlcarousel/owl.theme.default.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/responsivo.css" rel="stylesheet">
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="owlcarousel/owl.carousel.min.js" type="text/javascript"></script>
</head>

<body>
    <div id="inicio" class="nav-menu">
        <nav class="navbar navbar-expand-lg navbar-dark">
          <img src="img/logo-branco.png" class="d-inline-block align-top img-fluid" alt="Connect Hub">
          <button class="navbar-toggler" 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>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#inicio">INICIO<span class="sr-only"></span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#sobre">SOBRE</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#recursos">RECURSOS</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#imagens">IMAGENS</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#contato">CONTATO</a>
              </li>
            </ul>
          </div>
        </nav>
        <div class="container">
          <div class="nav-menu-texto">
            <div class="col-md-12">
              <h1>TEXT</h1>
            </div>
            <div class="col-md-12 botao">
              <a href="#marketplace" class="btn">BTN</a>
            </div>
          </div>
        </div>
      </div>
  </body>

Answer 1

您应该将 jquery.min.js 放在标记中任何其他脚本之前。正确的顺序是

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="owlcarousel/owl.carousel.min.js" type="text/javascript"></script>

Answer 2

要解决此问题，请升级到 Bootstrap 4.0.0。发布版本（测试版已过时）并加载以下文件（按顺序）：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<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.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

您没有加载 popper.js，所有像汉堡包菜单这样弹出或下拉的东西都需要加载。

我的汉堡菜单不起作用

My hamburger menu is not working

html

css

jquery

twitter-bootstrap-4

bootstrap-4