Bootstrap Navbar Collapse Button funktioniert nicht im Browser

-1

Entschuldigung, da dies viel gefragt wurde, aber keine der Lösungen scheint für mich zu arbeiten. Wenn ich die Größe des Fensters ändere, wird meine Navigationsleiste zu einer netten Schaltfläche, aber wenn ich darauf klicke, fällt nichts herunter. Added js und jquery in <head> wie die meisten Lösungen sagen, aber immer noch kein Glück. Irgendwelche schnellen Lösungen? http://codepen.io/chiggory/pen/qNwLWq Bootstrap Navbar Collapse Button funktioniert nicht im Browser

HTML:

<head> 
<title>Test</title> 
<meta charset="utf-8" /> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<link rel="stylesheet" type="text/css" href="size.css" media="screen" /> 
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
</head> 

<body> 
<nav class="navbar navbar-default navbar-custom navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li class="active"><a href="http://www.thea21campaign.org">A21</a></li> 
     <li class="active"><a href="http://bvhope.blogspot.com">Blog</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li class="active"><a href="learn-more.html">Learn More</a></li> 
     <li class="active"><a href="contact-us.html">Contact Us</a></li> 
     <li class="active"><a href="join-us.html">Calendar of Events</a></li> 
     </ul> 
    </div> 
    </div> 
</nav>

CSS:

.navbar-custom { 
    background-color: #800000; 
    color: white; 
    border-radius: 0; 
} 
.navbar-custom .navbar-nav > li > a { 
    color: #fff; 
} 
.navbar-custom .navbar-nav > .active > a, 
.navbar-nav > .active > a:hover, 
.navbar-nav > .active > a:focus { 
    color: #ffffff; 
    background-color: #800000; 
} 
.navbar-custom .navbar-nav > li > a:hover, 
.nav > li > a:focus { 
    text-decoration: none; 
    background-color: #800000; 
} 
.navbar-custom .navbar-brand { 
    color: #eeeeee; 
} 
.navbar-custom .navbar-toggle { 
    background-color: #eeeeee; 
} 
.navbar-custom .icon-bar { 
    background-color: #800000; 
}

Quelle

2016-08-20 Erich Sterzing

Verwenden

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

statt

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">

Quelle

2016-08-20 17:41:57

Meine Güte, vielen Dank! Ich werde bald aufhören, dumme Fragen zu stellen, hoffe ich. –

@ErichSterzing Überhaupt nicht! Ich habe dieses Problem versehentlich beobachtet. Deine Fragen sind nicht dumm :) Jeder macht Fehler wegen Unaufmerksamkeit. –

Bootstrap Navbar Collapse Button funktioniert nicht im Browser

Antwort

Verwandte Themen