Collapse插件呈现自举导航栏上的上升滚动条

确保右侧面板足够宽，以便导航栏不会折叠，并且您将看到一个水平滚动条（在初始加载/刷新时），该滚动条从底部向上漂浮导航栏。Collapse插件呈现自举导航栏上的上升滚动条

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

删除navbar右边的内容会使滚动条看起来消失，但一个元素仍然向上浮动，当它通过“左”文本时可以被检测到。

<!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

来源

2016-07-04 Andrey K.

我有同样的问题。我的解决办法是添加CSS类：

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

来源

2016-07-26 11:29:24

你能提供例如plunker这个解决方案的请@约翰汉堡 – user93

和@Jadir J.席尔瓦小 – user93

Collapse插件呈现自举导航栏上的上升滚动条

回答

相关问题