Bootstrap Mobile Drop-Down-

Ich bin nicht in der Lage die mobile Dropdown-Liste erhält auf dieser navbar arbeiten, ich habe alle Dateien erforderlich, aber es immer noch erlauben werden nicht alle Elemente fallen nach unten (in der mobilen Ansicht?)Bootstrap Mobile Drop-Down-

Gibt es etwas, was ich bin fehlt, dass ich nicht

<div class="navbar navbar-default navbar-fixed-top"> 
<div class="container"> 
    <div class="navbar-header"> 
     <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="navbar-main"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="/" style="background-color: lightgrey;">Site</a> 
    </div> 
     <div class="navbar-collapse collapse" id="navbar-main"> 
      <ul class="nav navbar-nav"> 
       <li><a href="#">Site</a> 
       </li> 
       <li><a href="#">Rules</a> 
       </li> 
       <li><a href="#">Results</a> 
       </li> 
       <li><a href="#">Contact</a> 
       </li> 
       <li><a href="#">Request Account</a> 
       </li> 
      </ul> 
      <form class="navbar-form navbar-right" role="search"> 
       <div class="form-group"> 
        <input type="text" class="form-control" name="username" placeholder="Username"> 
       </div> 
       <div class="form-group"> 
        <input type="password" class="form-control" name="password" placeholder="Password"> 
       </div> 
       <button type="submit" class="btn btn-default">Sign In</button> 
      </form> 
     </div> 

</div>

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>Site</title> 


     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 


     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
     <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script> 

    </head> 
    <body> 
    @include('layouts.header') 

    @include('layouts.footer') 

    </body> 
</html>

Quelle

2016-11-11 NZSteve

Haben Sie [für Fehler der Konsole überprüft?] (Http://stackoverflow.com/documentation/javascript/185/getting-started-with-javascript/714/using-console-log) Stellen Sie sicher, Sie laden jQuery * vor * Laden Bootstrap. –

Können Sie eine [Bootply] (http://www.bootply.com/) erstellen? –

_jQuery_ muss ** vor ** _Bootstrap.js_ und 'data-target =" navbar-main "' sollte 'data-target =" # navbar-main "' (# hinzufügen) sein. – vanburen

Sie verpassen gerade die # in Ihrem data-target Wert sehen können. CodePen

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">

Quelle

2016-11-11 21:01:15

Bootstrap Mobile Drop-Down-

Antwort

Verwandte Themen