Bootstrap 使用 ng-Router 时导航栏不会折叠

Question

我的 angular 项目已完成并且工作正常。我遇到的问题是，在实施 ng-route 导航后 my bootstrap 导航栏将打开但不会折叠。 我检查了堆栈溢出的类似解决方案并尝试了很多，他们不工作。任何帮助将不胜感激。

--- HTML code ---

    <nav class="navbar navbar-inverse navbar-static-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand navbar-link" href="#/">Big Blue</a>
                <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="navcol-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active" role="presentation"><a href="#/">Home </a></li>
                    <li role="presentation"><a href="#overview">Overview </a></li>
                    <li role="presentation"><a href="#map">Map </a></li>
                </ul>
            </div>
        </div>
    </nav>

------ app.js code -------
var app = angular.module("bigBlue", ["ngRoute"]); /* New module called big blue */


app.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        template: '<div main-slide-show></div>' // I moved my slideshow directive into the context of the index 
    })                                          // instead of the context of the entire application.
    .when('/overview', {                        // pulling the slideshow directive out of the markup
        templateUrl : 'overview.html',
        controller : 'whaleController'
    })
     .when('/map', {
        templateUrl : 'map.html',
        controller : 'MapController',
    })

    .otherwise({
        redirectTo : '/'
    });
});

Answer 1

通常 collapsing/showing 通常是一种样式 thing.so 确保检查该元素并查看 class 是否应用于该元素以及 class 是否具有应用于它的样式。

在某些情况下，现有 class 可能会被其他自定义样式覆盖。因此请删除所有自定义 CSS 并仅加载 angular CSS。

Bootstrap 使用 ng-Router 时导航栏不会折叠

Bootstrap Navbar not collapsing using ng-Router

html

javascript

angularjs

angular-ui-bootstrap

twitter-bootstrap-3