Bootstrap Navbar不使用ng-Router折叠

时间:2016-08-17 13:37:24

标签: javascript angularjs html5 twitter-bootstrap-3 angular-ui-bootstrap

我的角度项目已经完成且工作正常。我遇到的问题是在实施ng-route导航后我的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 : '/'
    });
});

1 个答案:

答案 0 :(得分:0)

通常折叠/显示通常是样式的东西。所以确保检查该元素并查看该类是否正在应用于该元素,以及该类是否应用了该样式。

在某些情况下,现有的类可能会被其他自定义样式覆盖。删除所有自定义CSS并仅加载角度CSS。