Bootstrap Navbar mobile Ansicht nicht ordnungsgemäß zusammenklappen

Question

Ich habe diese Bootstrap Navbar nicht ordnungsgemäß in der mobilen Ansicht zusammenfallen. Schau dir das Bild unten an.

Hier ist mein Code (es funktioniert gut in jsfiddle), aber in meinem eckigen Projekt funktioniert es nicht richtig. JQuery 3.2.1 & Bootstrap 3.3.7

<nav class="navbar navbar-default"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
      <a class="navbar-brand" href="#">Company Name</a> 
     </div> 
     <div class="collapse navbar-collapse" id="navbar-collapse-2"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Services</a></li> 
       <li><a href="#">Works</a></li> 
       <li><a href="#">News</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

Hier ist auch die Winkel cli.json:

... 
    "apps": [{ 
     "root": "src", 
     "outDir": "dist", 
     "assets": [ 
      "assets", 
      "favicon.ico" 
     ], 
     "index": "index.html", 
     "main": "main.ts", 
     "polyfills": "polyfills.ts", 
     "test": "test.ts", 
     "tsconfig": "tsconfig.app.json", 
     "testTsconfig": "tsconfig.spec.json", 
     "prefix": "app", 
     "styles": [ 
      "../node_modules/bootstrap/dist/css/bootstrap.min.css", 
      "../node_modules/materialize-css/dist/css/materialize.min.css", 
      "styles.css" 
     ], 
     "scripts": [ 
      "../node_modules/jquery/dist/jquery.min.js", 
      "../node_modules/bootstrap/dist/js/bootstrap.min.js", 
      "../node_modules/materialize-css/dist/js/materialize.min.js" 
     ], 
     "environmentSource": "environments/environment.ts", 
     "environments": { 
      "dev": "environments/environment.ts", 
      "prod": "environments/environment.prod.ts" 
     } 
    }]... 

Answer 1

Sie könnten bereits diese auf eigene Faust ermittelt haben, aber in Falls Sie es nicht getan haben, liegt Ihr Problem daran, zwei verschiedene Front-End-Frameworks zu implementieren. Mitwirkende zum Materialise-Projekt auf Github haben erklärt, dass sie keine Kompatibilität zwischen mehreren Frontend-Frameworks unterstützen, da diese

nicht unterstützen.

Sie können die GitHub Frage here sehen.

Meine Vermutung ist, wenn Sie Ihre Verweise auf Materialize in Ihrer .angular-cli.json Datei herausnehmen, wird Ihre Navbar funktionieren, wie Sie es erwarten. enter code here