Boostrap 4 Navbar funktioniert nicht

Ich bin neu in Bootstrap. Ich habe Bootstrap 4 installiert und den Navbar-Code direkt aus dem Bootstrap 4 Navbar-Beispielcode genommen, aber der Code zeigt nicht die Navigation an - er zeigt nur das Menüsymbol. Könnte mir bitte jemand sagen, was ich hier falsch mache?Boostrap 4 Navbar funktioniert nicht

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Example</title> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap-grid.css"> 
    <link rel="stylesheet" type="text/css" href="js/bootstrap.js"> 
</head> 
<body> 
<div class="container"> 
      <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> 
</div> 
</body> 
</html>

Quelle

2017-10-10 Bernie K.

Die Bootstrap V4 Beta navbar unterscheidet sich von der Bootstrap V4 Alpha navbar.

Hier ist ein Beispiel Bootstrap v4 Beta navbar von https://getbootstrap.com/docs/4.0/components/navbar/ genommen

<nav class="navbar navbar-expand-lg navbar-light bg-light"> 
    <a class="navbar-brand" href="#">Navbar</a> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 

    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
    <ul class="navbar-nav mr-auto"> 
     <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="#">Link</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link disabled" href="#">Disabled</a> 
     </li> 
    </ul> 
    <form class="form-inline my-2 my-lg-0"> 
     <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> 
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
    </form> 
    </div> 
</nav>

Quelle

2017-10-10 17:25:58 TidyDev

Dies löste das Problem teilweise. Ich brauchte auch Brock Mareks Vorschlag, jQuery CDN hinzuzufügen, damit es funktioniert. Ich bin überrascht, dass der Übergang von Bootstrap 4 zu Bootstrap 4 Beta einen anderen Code verwendet. Sollte ich befürchten, dass der Code bei der Bootstrap 4-Produktion nicht mehr funktioniert und ich einen aktualisierten Code verwenden muss? –

Sie verwenden die Navigationsleiste einer alten Bootstrap-Version. Sie müssen die Vorlage von Bootstrap bekommen 4. Folgen Sie dem Link:

https://getbootstrap.com/docs/4.0/components/navbar/

Quelle

2017-10-10 17:22:53

nicht sicher, welche Version von Bootstrap Sie verwenden. Sie vermissen jedoch Jquery CDN, die Bootstrap definitiv brechen wird.

Entfernen Sie das Bootstrap JS am Anfang Ihres HTML-Dokuments und fügen Sie es am Ende hinzu. (jquery muss vor Bootstrap JS referenziert werden.)

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.min.js"></script>

Quelle

2017-10-10 17:28:13

Boostrap 4 Navbar funktioniert nicht

Antwort

Verwandte Themen