javascript - El colapso de la barra de navegación de Bootstrap 4 no funciona
html twitter-bootstrap (2)
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 personalizados
- Asegurar que el enlace jQuery esté antes del archivo Bootstrap JS
- Etiquetas de script en el encabezado y pie de página
- Copie y pegue ejemplos exactos de Bootstrap Docs (y obtengo el mismo comportamiento)
- Asegurarse de que JS se esté utilizando en el navegador Chrome
- HTML validado con el validador WC3
- Y, por supuesto, lea varias publicaciones en SO sobre este problema, pero ninguna conduce a una resolución
Enlace jsFiddle 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>
Gracias por adelantado
Debe incluir Popper según los Documentos de inicio .
Use estos para sus guiones en su lugar.
<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>
Fiddle de trabajo actualizado: https://jsfiddle.net/u7v5jba9/1/
Consejo: en el futuro, abra siempre la consola del inspector de desarrollo en su navegador para encontrar mensajes de error.
También puede cambiar la referencia de bootstrap a la versión incluida que incluye popper.js.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>