J'essaie d'obtenir mon bootstrap navbar implémenté dans mon fichier de présentation de guidon. J'ai remarqué des choses étranges qui se produisent avec bootstrap et ce n'est pas une exception. Une fois Je rétrécis ma fenêtre à une taille où l'icône de la barre de navigation doit apparaître, elle n'est pas visible, mais elle fonctionne toujours comme elle le devrait, je ne la vois tout simplement pas.
Voici toute ma classe layout.hbs:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<nav id="navigation" class="navbar navbar-inverse">
<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>
</div>
</nav>
{{{body}}}
<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>
Voici un exemple de ce qui se passe: Image de ce qui se passe On m'a dit de changer ma classe navbar en navbar-inverse
le ferait apparaître mais je n'ai pas eu de chance avec ça non plus.
Essayez d'utiliser navbar navbar-light
au lieu de navbar navbar-inverse
.
Bootstrap 4 est une réécriture majeure de l'ancienne Bootstrap et cela a été changé