Question

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

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

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

此处参考的是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一起使用，但可能就像将资源导出到公共目录一样。

Angular Bootstrap导航栏不能在play框架中工作

1 个答案: