bootstrap 导航栏中的动态高度

Question

我是 bootstrap 和 angularJS 的新人。但我正在构建页面，其中顶部和左侧页面将是静态的，不会移动。我使用 <nav class="navbar navbar-default navbar-fixed-top 从 bootstrap 到 header 和 position: fixed 使页面的左侧部分保持静态。
问题是导航栏是动态创建的，高度取决于数据库中的数据（这些是过滤器），所以结果我有 header 并且在内容中一些数据不可见，因为导航栏覆盖了它。它是如何解决的？也许导航栏不是一个好方法。

Answer 1

我会用两个指令来做到这一点。一种监视元素（在您的情况下是导航栏）高度，另一种根据新高度更改 css 填充（或任何您想要的）。

.directive('getHeight', function() {
    var addPadding = 10;
    return {
        link: function(scope, element, attrs) {
            scope.$watch( 'watchedHeight', function(newHeight) {
                element.css({
                  'padding-top': newHeight+addPadding+'px'
                });
            });
        }
    }
})

.directive('watchHeight', function($rootScope) {
    return {
        link: function(scope, element, attrs) {
            scope.$watch(function() {
              scope.watchedHeight = element[0].offsetHeight;
            });

            angular.element(window).on('resize', function() {
              $rootScope.$apply(function() {
                scope.watchedHeight = element[0].offsetHeight;
              })
            });
        }
    }

});

HTML:

  <body ng-app="myApp" ng-controller="TestCtrl" get-height="">
    <nav class="navbar navbar-default navbar-fixed-top" watch-height="">
      <div class="container">
        <p class="navbar-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</p>
      </div>
    </nav>
    <div class="container">
        Lorem ipsum dolor sit amet...
    </div>
  </body>

我也在监控 window 调整大小，不知道你的情况是否需要它。

http://plnkr.co/edit/AGdhZBiCfbH8GbU3y3Yy

bootstrap 导航栏中的动态高度

bootstrap dynamically height in navibar

css

twitter-bootstrap

angularjs-bootstrap