Angular Bootstrap 导航栏在播放框架中不工作

Question

我有一些使用 Angular UI Bootstrap 的代码，它有一个导航栏，当在小屏幕设备上查看时应该变成可折叠的，但是如果我运行这在我的 Play 本地！应用程序不会发生这种情况，它只是呈现为普通页面（缩小和变小）如果我使用我的浏览器并将其变小，它会按预期运行。

真正奇怪的是，我将 Play 生成的确切 html 放入 plunkr 中，当我在我的 phone on plunker 上查看它时，它确实按预期缩小了..

Play 中是否有任何设置需要切换以使其与小屏幕兼容？

此处供参考的是 Plunkr 和 HTML、http://plnkr.co/edit/wy67CeGUSSV0edTFbZft

<!DOCTYPE html>

<html ng-app="myApp">
    <head>
        <link rel="stylesheet" href="http://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css">

        <script src="//code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js" type="text/javascript"></script>

    </head>
    <body>

        <nav class="navbar navbar-default" ng-controller="NavbarController">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/">Brand</a>
                    <button type="button" class="navbar-toggle" ng-click="isNavbarCollapse = !isNavbarCollapse">
                        <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" collapse="isNavbarCollapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                        <li><a href="#">Link 4</a></li>
                    </ul>

                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Link 5</a></li>
                        <li><a href="#">Link 6</a></li>
                        <li><a href="#">Link 7</a></li>
                    </ul>
                </div>
            </div>
        </nav>

        <script>
            angular.module('myApp', [
                'ui.bootstrap'
            ]).controller('NavbarController', ['$scope', function($scope) {
                $scope.isNavbarCollapse = true;
            }]);
        </script>
    </body>
</html>

Answer 1

尝试在头部添加此元标记

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

然后检查您的服务器是否按预期提供 bootstrap.js 文件。我不知道它如何与 Play 一起使用，但也许可以将资产导出到 public 目录。

Angular Bootstrap 导航栏在播放框架中不工作

Angular Bootstrap navbar not working in play framework

playframework

responsive-design

twitter-bootstrap

playframework-2.0

angularjs