Bootstrap 3 Navbar Toggle - bricht zusammen, aber die Schaltfläche erscheint nicht

Question

Ich weiß nicht, was ich hier falsch mache, aber ich erwarte, dass es etwas kläglich dumm ist.

Ich benutze Bootstrap 3 in Umbraco 6.0.5 und ich kann nicht den Toggle auf die Größe ändern - unter 770px Breite kollabiert das Nava, aber es gibt keine Schaltfläche, um es umzuschalten, oder etwas ist da, wie gesehen in Code und Firebug, aber nicht sichtbar, in Chrome und Firefox (nicht IE versucht).

Es gibt eine fiddle und den Code unten. Ich verwende 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 und http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css in der Geige.

<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 &#39;reeches&#39; 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="">&#39;reeching&#39; 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--> 

Update - so habe ich versucht, die Daten-Ziel zu verändern (und haben die fiddle geändert) auf # main-nav und die ID-Haupt nav, keine Freude. Ich habe versucht, einen Strich Zeichen in der Taste> span Element und es funktioniert. Das heißt, die Striche werden angezeigt, und ich kann das Menü umschalten. Aber wo sind die Icon Bars?

<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> 

Answer 1

Und ändern <nav class="navbar">-<nav class="navbar navbar-default">

Answer 2

In Ihrer ersten Linie

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> 

sollte es data-target="#nav-collapse" sein, weil Sie <div class="collapse navbar-collapse" id="nav-collapse"> haben, wo id nav-collapse ist

Answer 3

Dies sollte man in die bekommen hingewiesen richtige Richtung. Es sieht so aus, als ob Ihr Haupt-Schluckauf Ihr Knopfdaten-Zielattribut eine Klasse und nicht eine ID referenziert. Es ist am besten, eine ID in dieser Situation zu verwenden, also wenn Sie diese Klasse anderswo im Code nennen, werfen Sie keine Kurvenbälle auf das Javascript.

Ich sehe auch, Sie haben mehrere <li class="dropdown"></li>, die leer sind. Ich bin mir nicht sicher, ob das beabsichtigt ist oder nicht, aber ich würde mich auf die Struktur beziehen, die ich beigefügt habe.

Hoffe, das funktioniert für Sie, und viel Glück!

<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> 

Answer 4

Bootstrap - der Umschaltknopf in der mobilen Ansicht nicht

FIX zeigen: Nehmen Sie diese Änderungen an: bootstrap.min.

css

Dies behebt die äußere Grenze des Umschaltfläche

.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 
} 

hinzufügen

border:1px solid #444; 

(Farbcode ändern Ihr Design anzupassen)

.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 
} 

Dies behebt die horizontalen Linien der Toggle-Taste

.icon-bar 
{ 
    display:block; 
    width:22px; 
    height:2px; 
    border-radius:1px; 
} 

hinzufügen

border:1px solid #444; 

(ändern Farbcode Ihr Design entsprechen)

.icon-bar 
{ 
    display:block; 
    width:22px; 
    height:2px; 
    border-radius:1px; 
    border:1px solid #444; 
}