Bootstrap 3 Navbar Collapse Problem

Dies ist der code den ich verwende:

<div class="navbar-wrapper">
<div class="navbar navbar-inverse navbar-fixed-top"  role="navigation">
  <div class="container">
    <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="index.html">Project name</a>        
    </div>
    <div class="collapse navbar-collapse" id="#nav-collapse">
    <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="work.html">Work</a></li>

    </ul>
    <ul class="nav navbar-nav navbar-right">

        <li><a href="#modal-contact-form" data-toggle="modal" data-target="#modal-contact-form">Contact</a></li>

    </ul>

    </div><!--/.navbar-collapse -->
  </div>
</div>
</div>

Das problem ist, dass ich nicht auf die 3 Symbol-bars! Jede Lösung für dieses?

Ich versucht, verschiedene Lösungen von navbars, die ich selbst installiert, den man von bootstrap github und hat nicht geklappt!

Vielen Dank im Voraus!

Was heißt "kann nicht auf" bedeuten?
Er bedeutet, dass, wenn er klickt auf die Schnittstelle widget gebildet durch die drei <span> - tags mit der "icon-bar" - Klasse, die Sie nicht verursachen, das Menü zu erweitern, wie erwartet. Dies war aufgrund eines Programmierfehlers in der id woanders (siehe meine Antwort weiter unten für details). Es ist ein häufiger Fehler.

InformationsquelleAutor Alex Shd | 2013-11-22

4

ID:
```
<div class="collapse navbar-collapse" id="#nav-collapse">
```
Sein soll:
```
<div class="collapse navbar-collapse" id="nav-collapse">
```
Demo
- Dieser legt seine primäre problem, aber es ist nicht das ganze Bild. Er sollte mit <nav> für seine navbar. Auch die "navbar-wrapper" sollte wirklich eine Klasse der <nav> tag, nicht eine äußere <div>. Finden Sie in der Navigationsleiste im Abschnitt diese Seite: sitepoint.com/understanding-twitter-bootstrap-3
- Ich habe das ja auch schon. Funktioniert immer noch nicht.
- Können Sie den aktualisierten code in einem jsFiddle ?
- jsfiddle.net/52VtD/680 ich habe auch die Gewohnheit.css-Datei ich verwende. Vielleicht ist es ein problem.
- Wenn ich minimieren Sie das browser-Fenster, halb von dem desktop, das Symbol bars können angeklickt werden, das Menü Zusammenbruch, aber ich kann nicht durch klicken auf einen beliebigen link. Wenn ich das Fenster minimieren, um ein smartphone anzeigen, können nicht klicken Sie auf die span-Ikonen mehr.
- Es scheint zu funktionieren in der Geige, die Sie geschrieben.
- Ich sah, aber immer noch nicht richtig funktioniert auf meinem Projekt 🙁
InformationsquelleAutor user3142418
1

Deinem code war ein Fehlschlag, weil Sie eine # Charakter in der id Attribut; es ist nur erforderlich, in der data-target Attribut.

Hier ist Ihr Menü, Feste und bestätigt in Firefox, Chrome und MSIE:
```
<nav class="navbar-wrapper navbar-inverse navbar-fixed-top"  role="navigation">
    <div class="container">
    <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="index.html">Project name</a>        
    </div>

    <div class="collapse navbar-collapse" id="nav-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="work.html">Work</a></li>

        </ul>
        <ul class="nav navbar-nav navbar-right">

            <li><a href="#modal-contact-form" data-toggle="modal" data-target="#modal-contact-form">Contact</a></li>

        </ul>

    </div>
    </div>
</nav>
```
- Es funktioniert nicht. Können nicht, klicken Sie auf die span-Ikonen.
- Ich erweiterte das Fenster mehr, wie ein tablet-Ansicht und jetzt ist das Menü erweitert, aber nicht durch klicken auf einen beliebigen link. Dies hat mich verärgert! Es war zu arbeiten, wenn ich mit Programmieren angefangen die Vorlage, und jetzt versuche ich, um es herauszufinden, seit gestern.
- Vielleicht ist es ein problem mit meinem custom.css? html, body { height: 100%; background-color:#b4dced; } #wrap { min-height: 100%; height: auto !wichtig; height: 100%; margin: 0 auto -60px; } #push, #footer { height: 60px; } #footer { background-color:#bafa91; } @media (max-width: 767px) { #footer { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; } }
- Ich glaube nicht, dass dein CSS ist das problem verursacht. Ich legen Sie Ihre CSS-und meine obige navbar-Lösung in einer bootply und es funktioniert: bootply.com/96058 Klar ist es etwas anderes mit Ihrem code, der nicht hier deutlich. Vielleicht hast du Probleme laden ein der Komponente (jQuery, Bootstrap JS-Bibliothek). Welchen browser verwendest du zum testen?
- Ich benutze Mozilla Firefox, habe aber auch hochgeladenen Dateien auf meine web-hosting-account und getestet mit meinem iPhone.
- Ich freue mich auf die Bootply auf meinem iPhone jetzt: bootply.com/render/96058, Tippen auf die drei Striche bringt, wird das Menü für mich. Machen Sie die Pflege zu geben die hosting-URL? Kann ich die gesamte Seite und sehen, was Los ist.
- Ich habe die bootstrap.js Datei auf eine frische und es ist auf meinem desktop arbeiten, aber funktioniert nicht auf meinem iPhone. Irgendeine Idee?
- Stellen Sie sicher, dass Sie mit der neuesten Bootstrap CSS-und JS. Ich würde empfehlen jQuery 1.10.x (nicht jQuery 2 natürlich) und stellen Sie sicher, dass es das laden in den Kopf. Wir sollten auch laufen gegen Ihre HTML-validator um sicherzustellen, dass es ist nichts falsch mit dem DOM.
- Ich bereits aktualisiert, um die neuesten jQuery und Bootstrap JS. Wenn ich minimieren Sie das browser-Fenster, die Hälfte des Desktops, die bars-Symbol geklickt werden kann. Wenn ich das Fenster minimieren, um ein smartphone anzeigen, können nicht klicken Sie auf die span-Ikonen mehr. Auch das geht nicht von meinem iPhone.
- Kannst du die URL von wo man die ganze Seite zur Verfügung steht? (BTW, ich bin hinter einer firewall, die möglicherweise verhindern, dass ich darauf zugreifen, aber ich werde sehen was ich tun kann.)
- Sorry, aber ich kann nicht den link posten 🙁
InformationsquelleAutor PhilNicholas

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.