Boostrap 4 Navbar ne fonctionne pas

Je suis nouveau à Bootstrap. J'ai installé Bootstrap 4 et pris le code Navbar directement à partir du code exemple Bootstrap 4 Navbar, mais le code n'affiche pas la navigation - il affiche uniquement l'icône du menu. Quelqu'un pourrait-il me dire ce que je fais mal ici s'il vous plait?Boostrap 4 Navbar ne fonctionne pas

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Example</title> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap-grid.css"> 
    <link rel="stylesheet" type="text/css" href="js/bootstrap.js"> 
</head> 
<body> 
<div class="container"> 
      <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
       <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> 
        <span class="navbar-toggler-icon"></span> 
       </button> 
       <a class="navbar-brand" href="#">Navbar</a> 
       <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> 
        <div class="navbar-nav"> 
         <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> 
         <a class="nav-item nav-link" href="#">Features</a> 
         <a class="nav-item nav-link" href="#">Pricing</a> 
         <a class="nav-item nav-link disabled" href="#">Disabled</a> 
        </div> 
       </div> 
      </nav> 
</div> 
</body> 
</html>

Source

2017-10-10 Bernie K.

Le Bootstrap V4 Beta navbar est différent du Bootstrap V4 Alpha navbar.

Voici un exemple Bootstrap v4 Beta navbar provenant https://getbootstrap.com/docs/4.0/components/navbar/

<nav class="navbar navbar-expand-lg navbar-light bg-light"> 
    <a class="navbar-brand" href="#">Navbar</a> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 

    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
    <ul class="navbar-nav mr-auto"> 
     <li class="nav-item active"> 
     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">Link</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link disabled" href="#">Disabled</a> 
     </li> 
    </ul> 
    <form class="form-inline my-2 my-lg-0"> 
     <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> 
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
    </form> 
    </div> 
</nav>

Source

2017-10-10 17:25:58 TidyDev

Ceci a partiellement résolu le problème. J'avais aussi besoin d'utiliser la suggestion de Brock Marek d'ajouter jQuery CDN pour le faire fonctionner. Je suis surpris que d'aller de Bootstrap 4. Alpha à Bootstrap 4 Beta utilise un code différent. Dois-je m'inquiéter quand Bootstrap 4 Production arrive, le code peut cesser de fonctionner et je vais avoir besoin d'utiliser un code mis à jour? –

Vous utilisez la barre de navigation d'une ancienne version de bootstrap. Vous devez obtenir le modèle de bootstrap 4. Suivez le lien:

https://getbootstrap.com/docs/4.0/components/navbar/

Source

2017-10-10 17:22:53

Je ne sais pas quelle version d'amorçage que vous utilisez. Cependant, il vous manque le CDN Jquery qui va définitivement casser le bootstrap. Débarrassez-vous du Bootstrap JS au début de votre doc html et ajoutez ceci à la fin. (jquery doit être référencé avant bootstrap JS.)

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.min.js"></script>

Source

2017-10-10 17:28:13

Boostrap 4 Navbar ne fonctionne pas

Répondre

Questions connexes