Bootstrap v4 Navbar bug?

Voici le problème. J'ai pris l'exemple de la barre de navigation par défaut du côté bootstrap (https://v4-alpha.getbootstrap.com/components/navbar/). Ils montrent la barre de navigation pleine taille dans le résultat, qui peut s'effondrer, lorsque l'écran devient plus petit. Mais quand je l'ai inséré le code dans mon projet, il montre ceci:Bootstrap v4 Navbar bug?

https://ibb.co/fjBNhQ

Comme vous pouvez le voir est toujours effondrée. J'ai essayé beaucoup d'autres exemples, mais rien ne marche. Voici le code:

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Test area</title> 
 
    <link rel="stylesheet" href="media/css/bootstrap.min.css"> 
 
</head> 
 

 
<body> 
 
    <div class="header"> 
 
    <div class="top-header"> 
 
     <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> 
 
    </div> 
 
    </div> 
 
    <script src="media/js/jquery.min.js"></script> 
 
    <script src="media/js/popper.min.js"></script> 
 
    <script src="media/js/bootstrap.min.js"></script> 
 
</body> 
 

 
</html>

Source

2017-08-27 AndrewGG

Veuillez essayer de travailler avec leur gabarit de démarrage. –

@Emran qui est pour bootstrap 3. J'ai besoin de plus récent: v4. – AndrewGG

l'extrait de code que vous avez partagé est correct. Assurez-vous que vous avez spécifié la destination correcte avec l'attribut href. – ern

Le code affiché ne fonctionne que sur Bootstrap alpha 6, non bêta. En effet, les classes navbar-toggleable* ont été remplacées par navbar-expand* à partir de Bootstrap 4 beta.

Bootstrap 4.0.0: https://www.codeply.com/go/0c0FC1Lrn2

<nav class="navbar navbar-expand-lg navbar-light bg-faded"> 
      <a class="navbar-brand" href="#">Navbar</a> 
      <button class="navbar-toggler" 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> 
      <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>

Voir aussi: Bootstrap 4 navbar layout works using CDN, breaks using downloaded code

Source

2017-08-27 16:49:52 ZimSystem

Eh bien, il y a des docs seulement pour alpha? Okey ... – AndrewGG

http://getbootstrap.com/ – ZimSystem

Eh bien, raté ça. Merci :) – AndrewGG

Vous devez ajouter les balises meta nécessaires comme décrit here:

<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Et utiliser les classes CSS correct comme décrit here

<nav class="navbar navbar-expand-lg navbar-light bg-light">

La barre de navigation s'effondrer au point d'arrêt lg

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <!-- Required meta tags --> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 
    <title>Test area</title> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 
</head> 
 

 
<body> 
 
    <div class="header"> 
 
    <div class="top-header"> 
 
     <div class="container"> 
 
     <nav class="navbar navbar-expand-lg 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> 
 
    </div> 
 
    </div> 
 
    <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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
 
</body> 
 

 
</html>

Source

2017-08-27 16:44:32

Pour tous ceux qui cherchent maintenant le code fonctionne maintenant avec la dernière Bootstrap.

npm install [email protected]

N'oubliez pas de recharger pour vérifier le changement!

Source

2018-01-11 00:20:47 bmjrowe

Bootstrap v4 Navbar bug?

Répondre

Questions connexes