2017-03-10 7 views
4

Ich lerne Bootstrap und spielen mit Komponenten, insbesondere die Navbar. Meine Links/Listenelemente werden nicht angezeigt, haben direkt von Bootstrap kopiert. Ich hoffe, jemand könnte mir bitte erklären, was ich vermisse.Bootstrap Navbar Liste Elemente/Links werden nicht angezeigt

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
    <title>NavBar</title> 

    <!-- bootstrap css --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"> 
</head> 

<body> 


    <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" 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="navbarNavAltMarkup"> 
      <div class="navbar-nav"> 
       <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> 
       <a class="nav-item nav-link" href="#">Features</a> 
       <a class="nav-item nav-link" href="#">Pricing</a> 
       <a class="nav-item nav-link disabled" href="#">Disabled</a> 
      </div> 
     </div> 
    </nav> 


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"> 
    </script> 
</body> 

http://codepen.io/hellojessicagraham/pen/yMgXjo

Vielen Dank im Voraus

+0

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_collapse&stacked=h – vishalgelani

Antwort

2

In Bootstrap 4, die navbar-expand-* Klasse benötigt wird, um die horizontale Navigationsleiste zu zeigen, sonst wird es kollabiert hinein mobiler Zustand ist.

Stellen Sie sicher, dass es richtig in der Codepen als https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

Oder verwiesen haben, verwenden Sie Codeply, und es wird die alle relevanten Bibliotheken für Sie umfassen: Bootstrap 4 on Codeply

Hier ist der navbar mit Bootstrap 4.0.0: http://www.codeply.com/go/SmEyy7rg5S

1

ihre CSS-Datei Ihrer Referenz ist nicht das, was auf ihrer Website aufgeführt ist. verwenden Sie die folgenden Schritte aus:

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

Ihre Java-Script-Datei ist auch nicht das, was aufgeführt wird:

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

hier ist, wo Sie die neuesten Links zu den meisten up-to-date CDN finden: http://getbootstrap.com/getting-started/

Sie haben wahrscheinlich das von einem experimentellen Ort kopiert. (es sagt alpha innerhalb des Dateinamens, so dass es mehr als wahrscheinlich einige Bugs gibt)

1

Es sieht aus wie Sie die Alpha-Version von Bootstrap verwenden. Diese Version kann einen Fehler enthalten. Vielleicht möchten Sie die neueste stabile Version verwenden. This answer hat die Links zu den korrekten CSS- und JS-Dateien für Version 3.3.7. Wenn der Bootstrap nach dieser Antwort aktualisiert wird, können Sie die neueste Version unter http://getbootstrap.com/getting-started/ herunterladen. Hoffe das hilft!

Albert

Verwandte Themen