2017-09-05 80 views
0

我有這個bootstrap導航欄在移動視圖中沒有正確合攏。看看下面的圖片。 enter image description hereBootstrap導航欄移動視圖沒有正確合攏

這是我的代碼(它在jsfiddle中運行良好),但在我的角度項目中,它無法正常工作。 的JQuery 3.2.1 & 引導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> 

這裏也是角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" 
     } 
    }]... 

回答

0

您可能已經確定這對你自己的,但在如果你沒有,你的問題源於試圖實施兩個不同的前端框架。 Github上的Materialise項目的貢獻者表示,他們不支持多個前端框架之間的兼容性,他們表示,他們

不支持多個前端框架之間的兼容性。

你可以看到GitHub的問題here

我的猜測是,如果您在.angular-cli.json文件中取出對Materialise的引用,那麼導航欄將按照您的預期工作。 enter code here