Navbar collapse nicht die Erweiterung mit dropdown nach Klick auf es

So, ich habe gerade angefangen mit Bootstrap 3 und ich will mein header werden an der Oberseite befestigt, die Inhalte in der es vertikal ausgerichtet mit dem Inhalt in den Körper, und schließlich reagieren.

Alles funktioniert einwandfrei außer das klicken auf zusammenbrach navbar scheint nicht zu funktionieren. Klick auf die kleine Symbol mit drei bars, einer über dem anderen nicht zeigen Sie mir meine Liste unten.

Ich weiß, dies könnte eine ganz einfache Fehler, aber ein Klick auf diese Kinder hier, funktioniert nicht:

Navbar collapse nicht die Erweiterung mit dropdown nach Klick auf es

Ich glaube, ich könnte etwas falsch mit Klassen in meinem Kopf.

Dies ist mein 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>

Das einzige, was ich in meinem custom css ist:

@media (min-width: 980px){
    body{
        padding-top: 70px;
    }
}

aber ich glaube nicht, dass wäre dieses problem verursachen.

Die Dinge, die ich habe, bevor mein header in mein html sind:

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

die sind alle in meinem lokalen Verzeichnis.

Suche nach "collapse funktioniert nicht"/"collapse klicken funktioniert nicht" zeigt mir paar Ergebnisse, die zu sein scheinen im Zusammenhang mit dem problem des symbols selbst nicht angezeigt.

Einschließlich collapse.js das kam mit der bootstrap hat nicht dieses problem zu beheben entweder.

  • Ihre Schaltfläche definiert data-target=".navbar-ex1-collapse" aber Sie müssen nicht fügen Sie diese Klasse, um Ihre nav. Verwenden <nav class="collapse navbar-collapse navbar-ex1-collapse" role="navigation"> und der code wird funktionieren
  • Wow... vielen Dank! Um ehrlich zu sein, ich habe mit bootstrap, ohne zu wissen, was diese Daten-schaltet und Sachen wie, dass tatsächlich tun. Bitte fügen Sie Ihren Kommentar als eine Antwort, ich werde es akzeptieren. 🙂
Schreibe einen Kommentar