Barre de navigation de l'effondrement ne se développe pas avec la liste déroulante après avoir cliqué sur elle
Donc, j'ai commencé à utiliser Bootstrap 3, et je veux que mon en-tête pour être fixé au dessus, le contenu qu'il aligné verticalement avec le contenu dans le corps, et enfin, réactif.
Tout fonctionne bien sauf qu'en cliquant sur effondré navbar ne semble pas fonctionner. En cliquant sur la petite icône avec trois bars les uns sur les autres ne me montre ma liste ci-dessous.
Je sais que cela pourrait être une erreur très basique mais en cliquant sur ce gamin, ici, ne fonctionne pas:
Je pense que j'ai peut-être fait quelque chose de mal avec des cours dans mon en-tête.
C'est mon code:
<header class="navbar navbar-default navbar-fixed-top" role="banner">
<div class="col-10">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo Text</a>
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li class="home_button"> <a href="#"> <span class="glyphicon glyphicon-home"></span> </a> </li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><b class="caret"></b></a>
<ul class="dropdown-menu">
<li> <a href="#" > My Account </a> </li><br>
<li> <a href="#"> Logout </a> </li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</header>
La seule chose que j'ai dans mon css personnalisé:
@media (min-width: 980px){
body{
padding-top: 70px;
}
}
mais je ne pense pas que ce serait à l'origine de ce problème.
Les choses que j'ai compris, avant de ma tête, dans mon code html:
<script src="/static/js/jquery-1.10.2.min.js"></script>
<script src="/static/js/jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-3.0.0-min.js"></script>
<link href="/static/css/bootstrap-3.0.0.css" rel="stylesheet" media="screen">
<link href="/static/app/bssgame2/css/my_custom.css" rel="stylesheet" media="screen">
qui sont dans mon répertoire local.
De la recherche pour "effondrement pas de travail"/"effondrement cliquez sur ne travaillent pas" me montre des tas de résultats qui semblent être liés à la problématique de cette icône ne s'affiche pas.
Y compris collapse.js qui est venu avec bootstrap n'a pas de résoudre ce problème.
data-target=".navbar-ex1-collapse"
mais vous n'avez pas ajouter cette classe à votre nav. Utilisation <nav class="collapse navbar-collapse navbar-ex1-collapse" role="navigation">
et votre code sera beau travailWow... merci! Pour être honnête, j'ai été en utilisant bootstrap sans savoir ce que ces données-bascule et des trucs comme ça en réalité. S'il vous plaît ajouter votre commentaire en réponse, je vais l'accepter. 🙂
OriginalL'auteur Forbidden Overseer | 2013-09-24
Vous devez vous connecter pour publier un commentaire.
L'effondrement de la barre de navigation utilise l'effondrement du plugin, voir: http://getbootstrap.com/javascript/#collapse. Ainsi, ajouter un data-toggle="collapse" et de données cible à votre barre de navigation bouton. Et ajouter la même classe que celle utilisée pour les données de la cible à la valeur liquidative de l'élément de votre barre de navigation:
et:
Plus sur La migration de Bootstrap Bootstrap v3 v4 ici, dans les docs.
data-target="navbar-collapse"
devrait êtredata-target=".navbar-collapse"
.Faute de frappe.
class="navbar-toggle"
devrait êtreclass="navbar-toggler"
.OriginalL'auteur Bass Jobsen
Pour d'autres qui vont arriver à partir d'une recherche sur le web:
J'ai eu ce même problème - ne pas être en mesure de développer une navbar - mais l'ensemble de mon code était bon. Si vous avez vérifié votre
data-toggle
par @Bass Jobsen's réponse, et rencontrez toujours des problèmes alors vérifiez votre CA.Mon problème était que j'avais un au niveau du réseau ad blocker qui a été le blocage de certains de mes CDN ed scripts.
Facepalm.
OriginalL'auteur Spievat