Bootstrap 4 navbar effondrement ne fonctionne pas

Je suis en train de mettre en œuvre une barre de navigation en utilisant Bootstrap 4. Actuellement, la barre de navigation correctement s'effondre lorsque la fenêtre est réduite pour mobile taille. Cependant, lorsque l'on tente de basculer menu, rien ne se passe. Le jsFiddle exemple illustre ce comportement. J'ai joint le code HTML.

Les étapes que j'ai prises:

  • Suppression de tous les CSS personnalisé
  • Assurer jQuery lien est avant Bootstrap fichier JS
  • Des balises Script dans l'en-tête et le pied de page
  • Copier et coller exact des exemples de Bootstrap Docs (et j'ai le même comportement)
  • Veiller à ce que le JS est utilisé dans le navigateur Chrome
  • Validé HTML à l'aide de WC3 validateur
  • Et bien sûr, de lire les différents posts sur ce sujet de la question, mais aucun ne mène à une résolution

jsFiddle lien https://jsfiddle.net/u7v5jba9/

    <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">
          <h6 class="text-light text-center">Footer</h6>
        </nav>
      </div>

      <!-- Scripts -->
      <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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
    </body>

Merci d'avance

Vérifiez votre console: "Uncaught ReferenceError: Popper n'est pas défini"

OriginalL'auteur S. White | 2017-11-16