Question

确保右侧面板足够宽，以便导航栏不会折叠，您将看到从导航栏底部向上浮动的水平滚动条（在初始加载/刷新时）。

如果将导航栏内容直接添加到文件而不是使用ng-include，则不会显示滚动条。

删除导航栏右侧内容会使滚动条看起来消失但元素仍然向上浮动，当它通过“左”时会被检测到。文本。

<!doctype html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min.js"></script>
    <script>
        angular.module('app', [
          'ngAnimate',
        'ui.router',
          'ui.bootstrap'
        ])
        .controller('NavbarCtrl', ['$scope', function ($scope) {
            $scope.isCollapsed = true;
        }])
        .directive('navbar', function() {
          return {
          templateUrl: 'navbar.html',
          restrict: 'E',
          controller: 'NavbarCtrl'
          }
        })
      .config(['$stateProvider', function ($stateProvider) {
        $stateProvider
          .state('navpage', {
            url: '/navpage',
            templateUrl: 'view.html'
          });
      }]);
    </script>
  </head>
  <body ng-app="app">
    <a ui-sref="navpage">Widen this panel and then click me</a>

    <div ui-view=""></div>

  </body>
</html>

https://plnkr.co/edit/MnGQHgXW8pod42xexkkp?p=preview

原始问题：https://github.com/angular-ui/bootstrap/issues/5474

Answer 1

我遇到了同样的问题。我的解决方案是添加css类：

.navbar-collapse.in {
  overflow-y: hidden;
}

折叠插件在引导导航栏上呈现上升的滚动条

1 个答案: