2014-02-22 45 views
14
<!DOCTYPE html> 
<html lang="de"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <!--<meta charset="utf-8"> --> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Stadtfestlauf - Start</title> 
    <link rel="icon" type="image/png" href="favicon.png" /> 

    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]--> 
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
    <!--script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 
</head> 
<body id="avcontent"> 
    <nav class="navbar navbar-default navbar-inverse" role="navigation"> 
    <div class="container-fluid" id="navfluid"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <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">Stadtfestlauf</a> 
    </div> 
<div class="collapse navbar-collapse" id="navigationbar"> 
<ul class="nav navbar-nav"> 
    <li class="active"><a href="./Index.html">Startseite</a></li> 
    <li><a href="./Rueckblick.html">R&uuml;ckblick</a></li> 
    <li><a href="./Wettbewerb.html">Wettbewerb</a> 
    <li><a href="./anmelden.html">Anmelden</a> 
    <li><a href="./sponsoren.html">Sponsoren</a> 
</ul> 
</div><!-- /.navbar-collapse --> 
</div><!-- /.container-fluid --> 
</nav> 

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://code.jquery.com/jquery.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.min.js"></script> 
<script type="text/javascript"> 
if (navigator.userAgent.match(/IEMobile\/10\.0/)) { 
var msViewportStyle = document.createElement("style"); 
msViewportStyle.appendChild(
document.createTextNode(
"@-ms-viewport{width:auto!important}" 
) 
); 
document.getElementsByTagName("head")[0]. 
appendChild(msViewportStyle); 
} 
</script> 

<div class="container" id="pcontent"> 
    <div class="col-md-7"> 
    <div class="jumbotron"> 
     <h1>Hallo</h1> 
     <p>sample text</p> 

     <div class="wrapper"> 
     <p><a class="btn btn-primary btn-lg" role="button" id="sendButton" href="http://google.com/">Ich bin hier vollkommen Falsch</a></p> 
     </div> 
    </div> 
</div> 

<div class="col-md-5" id="imgslide"> 
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
    <ol class="carousel-indicators"> 
     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
     <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
     <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
    </ol> 
    <div class="carousel-inner"> 
     <div class="item active"> 
    <img src="Assets/img1.jpg" alt="Stadtfestlauf" id="img"> 
     </div> 
     <div class="item"> 
    <img src="Assets/img2.jpg" alt="Stadtfestlauf" id="img"> 
     </div> 
     <div class="item"> 
     <img src="Assets/img3.jpg" alt="Stadtfestlauf" id="img"> 
     </div> 
    </div> 
</div> 
</div> 
</div> 
</body> 
</html> 

Hier ist eine meine index.html. Wenn ich es auf meinem Handy ausprobiere, funktioniert die Navigationsleiste nicht. Ich suchte nach fehlenden divs Tags."Mobile" Bootstrap-Navbar funktioniert nicht

+2

Es gibt mehrere nicht geschlossene Tags, ich würde wirklich noch einen Blick. – digitalextremist

+0

sry. Ich finde keine. – thegesuser

Antwort

38

Sie müssen die data-target Ihrer Schaltfläche zu der ID Ihres navbar-collapse Elements ändern.

Darüber hinaus fehlt Ihr HTML einige schließen <li> 's.

Working Example

zu ändern nav Code dazu:

<nav class="navbar navbar-default navbar-inverse" role="navigation"> 
    <div class="container-fluid" id="navfluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar"> 
       <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">Stadtfestlauf</a> 
     </div> 
     <div class="collapse navbar-collapse" id="navigationbar"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="./Index.html">Startseite</a></li> 
       <li><a href="./Rueckblick.html">R&uuml;ckblick</a></li> 
       <li><a href="./Wettbewerb.html">Wettbewerb</a></li>  
       <li><a href="./anmelden.html">Anmelden</a></li> 
       <li><a href="./sponsoren.html">Sponsoren</a></li> 
      </ul> 
     </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 
+0

Vielen Dank! Es funktioniert jetzt! – thegesuser

+0

Ich bin froh, dass ich helfen konnte! – Sebsemillia

+0

Danke !! Hatte das gleiche Problem und funktioniert jetzt auch für mich !! :) –

18

Es ist auch notwendig, jQuery vor dem Import Bootstrap zu importieren, wird es nicht aus, um zu arbeiten. Es sollte wie folgt aussehen:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

+1

Danke Mann, mir wurde gesagt, dass es keine dumme Frage gibt, also hier ist es: wie weißt du diese Art von Dingen, und wie würdest du es debuggen? –

+3

Ich weiß das, weil ich den Fehler gemacht habe und es (kurz) mich verrückt gemacht hat. Der Code war richtig, da war ich mir sicher! Ich debugge es, indem ich Stück für Stück Code wegnehme (normalerweise durch Kommentieren) und teste, was es einfacher und einfacher macht, bis ich es kaputt mache (dann weiß ich, wo ich hinschauen muss). Und da es so lange dauert, bis ich es gefunden habe, erinnere ich mich an diese Reise. :) –

+0

..duh! Danke, Mann. – Milan

Verwandte Themen