Question

我在移动视图中没有正确折叠此引导导航栏。看下面的图片。

这是我的代码（它在jsfiddle中运行良好）但在我的角度项目中它无法正常工作。 JQuery 3.2.1 ＆amp; 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>

这里也是angular-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

您可能已经自己确定了这一点，但是如果您没有，那么您的问题源于尝试实现两个不同的前端框架。 Github上Materialise项目的贡献者表示，他们

不支持多个前端框架之间的兼容性。

您可以看到GitHub问题here。

我的猜测是，如果您在.angular-cli.json文件中取出对Materialise的引用，您的导航栏将按预期工作。enter code here

Bootstrap Navbar移动视图未正确折叠

1 个答案: