首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >折叠插件在引导导航栏上呈现一个上升的滚动条

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

Stack Overflow用户
提问于 2016-07-05 02:20:37
回答 1查看 222关注 0票数 0

确保右侧面板足够宽,以便导航栏不会折叠,并且您将看到一个水平滚动条(在初始加载/刷新时),它从导航栏的底部开始向上浮动。

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

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

代码语言:javascript
复制
<!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

EN

回答 1

Stack Overflow用户

发布于 2016-07-26 19:29:24

我也有同样的问题。我的解决方案是添加css类:

代码语言:javascript
复制
.navbar-collapse.in {
  overflow-y: hidden;
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/38190379

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档