Mein Nav-Code in Bootstrap funktioniert nicht

-2

Der Code an der und dieser Nachricht, die ich in WebStorm verwende. Hast du eine Ahnung, was ich falsch mache? Vielleicht einige CDN-Fehler oder falsch im Code?Mein Nav-Code in Bootstrap funktioniert nicht

<!DOCTYPE html> 
 
    <html lang="en"> 
 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <title>DateLab</title> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
 
     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> 
 
    </head> 
 
    <body> 
 
     <nav class="navbar navbar-inverse"> 
 
      <div class="container-fluid"> 
 
    
 
       <div class="navbar-header"> 
 
        <a class="navbar-brand" href="#">DateLab</a> 
 
       </div> 
 
       <div> 
 
        <ul class="navbar navbar-nav"> 
 
         <li class="active"><a href="#">Home</a></li> 
 
         <li><a href="#">Hoe werkt het</a></li> 
 
         <li><a href="#">Wie zijn wij</a></li> 
 
         <li><a href="#">FAQ</a></li> 
 
         <li><a href="#">Contact</a></li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
     </nav> 
 
    </body> 
 
    </html>

Situation Ausgang jetzt: enter image description here

Erwartete Ausgabe: enter image description here

Quelle

2017-10-16 Joey Leeuwinga

Was ist Ihre Erwartungen? –

So etwas, reagiert. Bootstrap funktioniert nicht gut, denke ich. Siehe Bild in der Questio –

Was ist das Ergebnis, das Sie wollen? Ich verstehe nicht, was du sagst! –

ich Sie gerade geändert CDN-Links für Quellen. weil du die Beta-Version von Bootstrap benutzt hast. Außerdem gab es ein Problem mit HTML-Code, den ich gerade ersetzt habe.

Schauen Sie sich diese nützlichen Links

https://v4-alpha.getbootstrap.com/

https://v4-alpha.getbootstrap.com/components/navbar/

Nur vorsichtig sein, wenn Sie eine Bibliothek und Framework verwenden. Versuchen Sie, die stabilen Versionen zu verwenden. Fügen Sie am Ende des Codes immer auch Skripte ein. weil dein Code einige js-Fehler erzeugte.

<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> 
 
    <span class="navbar-toggler-icon"></span> 
 
    </button> 
 
    <a class="navbar-brand" href="#">Navbar</a> 
 
    <div class="collapse navbar-collapse" id="navbarNavDropdown"> 
 
    <ul class="navbar-nav"> 
 
     <li class="nav-item active"> 
 
     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link" href="#">Hoe werkt het</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link" href="#">Wie zijn wij</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link" href="#">FAQ</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link" href="#">Contact</a> 
 
     </li> 
 
     
 
    </ul> 
 
    </div> 
 
</nav> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
 
    <script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

Quelle

2017-10-16 15:57:24

Mein Nav-Code in Bootstrap funktioniert nicht

Antwort

Verwandte Themen