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
Vous devez vous connecter pour publier un commentaire.
Vous devez inclure Popper comme par le Prise En Main Docs.
De les utiliser pour vos scripts à la place.
Jour de travail de Violon: https://jsfiddle.net/u7v5jba9/1/
Conseil: À l'avenir, toujours ouvrir les dev inspecteur de la console de votre navigateur pour trouver tout les messages d'erreur.
Pouvez-vous nous expliquer pourquoi, y compris ceux des fichiers à partir de CDN est travaillé au lieu de partir du répertoire du projet?? J'ai été confronté au même problème aussi.
Y compris depuis le répertoire du projet devrait fonctionner à condition que vous ayez le correct versions.
Je ne sais pas quel est le problème, allez avec moi en fait, il n'a pas workes quand je l'ai télécharger et de l'utiliser à partir de mon répertoire local. Je n'ai pas utiliser n'importe quelle valeur pour
integrity
etcrossorigin
; simplement utilisé<link href="assets/css/bootstrap.min.css">
OriginalL'auteur Ashley Brown
Vous pouvez également modifier le fichier de bootstrap référence à la version intégrée qui comprend popper.js.
Violon: https://jsfiddle.net/smoore4/m2dLp71q/
OriginalL'auteur smoore4