El colapso de la barra de navegación de Bootstrap 4 no funciona

Question

Nov 16, 2017, 01:29 PM

javascript html twitter-bootstrap bootstrap-4

El colapso de la barra de navegación de Bootstrap 4 no funciona

Estoy tratando de implementar una barra de navegación usando Bootstrap 4. Actualmente, la barra de navegación se contrae correctamente cuando la ventana gráfica se reduce a tamaño móvil. Sin embargo, al intentar alternar el menú, no sucede nada. El ejemplo jsFiddle demuestra este comportamiento. También he adjuntado el HTML.

Pasos que he tomado:

Eliminar todos los CSS personalizadosAsegurar que el enlace jQuery esté antes del archivo Bootstrap JSEtiquetas de script en el encabezado y pie de páginaCopie y pegue ejemplos exactos de Bootstrap Docs (y obtengo el mismo comportamiento)Asegurarse de que JS se esté utilizando en el navegador ChromeHTML validado con el validador WC3Y, por supuesto, lea varias publicaciones en SO sobre este problema, pero ninguna conduce a una resolución

Enlace jsFiddlehttps://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>

Gracias por adelantado