Bootstrap 3 Bascule de la barre de navigation - s'effondre mais le bouton n'apparaît pas
Je ne sais pas ce que je fais mal ici, mais je m'attends à ce que ce soit terriblement stupide.
J'utilise Bootstrap 3 dans Umbraco 6.0.5 et je n'arrive pas à faire basculer la bascule - en dessous de 770px, la nav s'effondre mais il n'y a pas de bouton pour la basculer, ou plutôt quelque chose est là, comme vu dans le code et Firebug, mais pas visible, dans Chrome et Firefox (je n'ai pas essayé IE).
Il y a un violon et le code ci-dessous. J'utilise http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js , http://netdna.bootstrapcdn.com /bootstrap/3.0.3/js/bootstrap.min.js et http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css dans le violon.
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-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"#">reech</a>
</div>
<div class="collapse navbar-collapse" id="nav-collapse">
<ul class="nav navbar-nav">
<li><a href="/" class="selected">Home</a></li>
<li class=" dropdown">
<a href="/what-is-reech.aspx" class=" dropdown-toggle" data-hover="dropdown" rel="">What is reech? <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/what-is-reech/about-this-site.aspx" rel="">About this site</a></li>
</ul>
</li>
<li class=" dropdown">
</li>
<li><a href="/key-reech-projects.aspx" class="" rel="">Key reech projects</a></li>
<li class=" dropdown">
</li>
<li><a href="/technologies.aspx" class="" rel="">Technologies</a></li>
<li class=" dropdown">
</li>
<li><a href="/complementary-activities.aspx" class="" rel="">Complementary Activities</a></li>
<li class=" dropdown">
<a href="/news.aspx" class=" dropdown-toggle" data-hover="dropdown" rel="">News <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/news/merseyside-collective-switching-scheme-launched.aspx" rel="">Merseyside collective switching scheme launched</a></li>
<li><a href="/news/reech-scoops-top-award.aspx" rel="">reech scoops top award</a></li>
<li><a href="/news/reech-award-nomination.aspx" rel="">reech award nomination</a></li>
<li><a href="/news/green-deal-and-energy-company-obligation-(eco)-september-2013-statistics.aspx" rel="">Green Deal and Energy Company Obligation (ECO) September 2013 Statistics</a></li>
<li><a href="/news/energy-switching-scheme.aspx" rel="">Energy Switching Scheme</a></li>
<li><a href="/news/project-reeches-new-milestone.aspx" rel="">Project 'reeches' new milestone</a></li>
<li><a href="/news/firms-sign-up-for-new-opportunities.aspx" rel="">Firms sign up for new opportunities</a></li>
<li><a href="/news/14-new-jobs-created-for-merseyside-residents.aspx" rel="">14 new jobs created for Merseyside residents</a></li>
<li><a href="/news/reeching-out-to-low-carbon-and-green-energy-sector.aspx" rel="">'reeching' out to Low Carbon and Green Energy Sector</a></li>
</ul>
</li>
<li class=" dropdown">
</li>
<li><a href="/reech-into-business.aspx" class="" rel="">reech into business</a></li>
<li class=" dropdown">
<a href="/reech-partners.aspx" class=" dropdown-toggle" data-hover="dropdown" rel="">reech partners <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/reech-partners/reech-steering-group.aspx" rel="">reech Steering Group</a></li>
</ul>
</li>
</ul>
</div><!--close navbar-collapse-->
</div><!--close container-->
</nav><!--Close nav-->
Mettre à jour - j'ai donc essayé de modifier la cible de données (et j'ai modifié le violon ) en # main-nav et le id à main-nav, pas de joie. J'ai essayé de mettre un tiret dans l'élément button> span, et cela fonctionne. Autrement dit, les tirets s'affichent et je peux basculer le menu. Mais où sont les barres d'icônes?
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar">-</span>
<span class="icon-bar">-</span>
<span class="icon-bar">-</span>
</button>
Et changez <nav class="navbar"> à <nav class="navbar navbar-default">
Bootstrap - le bouton bascule ne s'affichera pas en vue mobile
CORRECTIF: apportez ces modifications à: bootstrap.min.css
Cela corrige la bordure extérieure du bouton bascule
.navbar-toggle
{
position:relative;
float:right;
padding:9px 10px;
margin-top:8px;
margin-right:15px;
margin-bottom:8px;
background-color:transparent;
background-image:none;
border-radius:4px
}
Ajouter
border:1px solid #444;
(changer le code de couleur pour correspondre à votre conception)
.navbar-toggle
{
position:relative;
float:right;
padding:9px 10px;
margin-top:8px;
margin-right:15px;
margin-bottom:8px;
background-color:transparent;
background-image:none;
border:1px solid #444; /* added line */
border-radius:4px
}
Cela corrige les lignes horizontales du bouton bascule
.icon-bar
{
display:block;
width:22px;
height:2px;
border-radius:1px;
}
Ajouter
border:1px solid #444;
(changer le code de couleur pour correspondre à votre conception)
.icon-bar
{
display:block;
width:22px;
height:2px;
border-radius:1px;
border:1px solid #444;
}
Cela devrait vous faire pointer dans la bonne direction. Il semble que votre hoquet principal soit que l'attribut data-target de votre bouton fasse référence à une classe plutôt qu'à un ID. Il est préférable d'utiliser un ID dans cette situation, donc si vous appelez cette classe ailleurs dans le code, vous ne lancez pas de boules de courbe au javascript.
Je vois aussi que vous avez plusieurs <li class="dropdown"></li> qui sont vides. Je ne sais pas si c'est intentionnel ou non, mais je me réfère à la structure que j'ai jointe.
J'espère que cela fonctionne pour vous et bonne chance!
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav"> <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="#">Reech</a> </div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown"> <a href="/what-is-reech.apsx" class="dropdown-toggle" data-toggle="dropdown">What is reech? <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/what-is-reech/about-this-site-aspx">About this site</a></li>
</ul>
</li><!-- dropdown -->
<li class="dropdown"> <a href="/what-is-reech.apsx" class="dropdown-toggle" data-toggle="dropdown">Key reech projects <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/technologies.apsx">Technologies</a></li>
<li><a href="/complementary-activities.apsx">Complementary Activities</a></li>
</ul>
</li><!-- dropdown -->
<li class="dropdown"> <a href="/what-is-reech.apsx" class="dropdown-toggle" data-toggle="dropdown">Key reech projects <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/technologies.apsx">Technologies</a></li>
</ul>
</li><!-- dropdown -->
</ul><!-- nav navbar-nav -->
</div><!-- collapse navbar-collapse -->
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Dans votre 1ère ligne
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
cA devrait etre data-target="#nav-collapse" Parce que vous avez <div class="collapse navbar-collapse" id="nav-collapse"> où id est nav-collapse