Navbar nicht funktioniert in einem Bootstrap: 4.0.0-beta.2

Ich habe neueste Version von Bootstrap installiert:Navbar nicht funktioniert in einem Bootstrap: 4.0.0-beta.2

"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5", 
"bootstrap": "^4.0.0-beta.2", 
"core-js": "^2.4.1", 
"jquery": "^3.2.1", 
"popper.js": "^1.12.9",

Und ich implementiert eine navbar:

<nav class="navbar navbar-expand-md navbar-light bg-light" *ngIf="!isLogged"> 
    <button class="navbar-toggler navbar-toggler-right" 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" routerLinkActive="active current"> 
     <a class="nav-link" routerLink="/sign-up"><span class="">Sign Up</span></a> 
     </li> 
     <li class="nav-item active" routerLinkActive="active current"> 
     <a class="nav-link" routerLink="/login"><span class="">Login</span></a> 
     </li> 
    </ul> 
    </div> 
</nav>

die in button verwandeln sollte wenn sie zu mobiler Größe kommen. Wirklich tut es aber, dass button nicht auf irgendwelche Klicks reagiert. Warum? Hat jemand eine Ahnung? Ich habe keine Skripte zu angular.cli hinzugefügt.

UPDATE: project structure

"dependencies": { 
    "@angular/animations": "^4.0.0", 
    "@angular/common": "^4.0.0", 
    "@angular/compiler": "^4.0.0", 
    "@angular/core": "^4.0.0", 
    "@angular/forms": "^4.0.0", 
    "@angular/http": "^4.0.0", 
    "@angular/platform-browser": "^4.0.0", 
    "@angular/platform-browser-dynamic": "^4.0.0", 
    "@angular/router": "^4.0.0", 
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5", 
    "bootstrap": "^4.0.0-beta.2", 
    "core-js": "^2.4.1", 
    "jquery": "^3.2.1", 
    "popper.js": "^1.12.9", 
    "rxjs": "^5.4.1", 
    "zone.js": "^0.8.14" 
    },

Quelle

2017-11-24 Jan Testowy

Haben Sie überprüft Ihre Konsole für Fehler haben sollte? – vanburen

Keine Fehler tatsächlich –

_Ich habe keine Skripte zu angular.cli_ hinzugefügt. Willst du damit sagen, dass du keine der JS-Abhängigkeiten angegeben hast, weil die ** Collapse ** -Funktionalität nicht mit ihnen funktioniert? Diese Frage kann helfen https://stackoverflow.com/questions/45552429/navbar-not-rendering-in-browser-using-ng-bootstrap-angular-4 – vanburen

Hier ist, was Sie in Ihrem .angular-cli.json

"scripts": [ 
    "../node_modules/jquery/dist/jquery.slim.min.js", 
    "../node_modules/popper.js/dist/umd/popper.min.js", 
    "../node_modules/bootstrap/dist/js/bootstrap.min.js" 
    ], 
"styles": [ 
    "styles.css", 
    "../node_modules/bootstrap/dist/css/bootstrap.css" 
    ]

Quelle

2017-11-25 04:58:07

Navbar nicht funktioniert in einem Bootstrap: 4.0.0-beta.2

Antwort

Verwandte Themen