angular-strap aside 无法在 navbar-fixed-top 上正确显示

Question

我正在使用 angular-strap aside 来显示使用 bootstrap 从导航栏上的按钮打开的菜单 3. 一切正常。但是，我把navbar-fixed-top class放到navbar后，显示不正常。

HTML代码：

<div ng-app="myApp" ng-controller="myController">
    <!-- When navbar-fixed-top class is added in, it causes problem. Without it, everything works fine -->
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" bs-aside="aside" data-placement="left">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
      </div>
    </div><!-- /.container-fluid -->
  </nav>
</div>

Javascript代码：

var app = angular.module('myApp', ['mgcrea.ngStrap.aside']);

app.controller('myController', function($scope){
  $scope.aside = {
    "title": "Title",
    "content": "This is the message!"
  };
});

http://jsfiddle.net/8ceuca0o/

我怎样才能让它发挥作用？

谢谢

Answer 1

只需在 CSS

的末尾添加以下内容

.navbar-fixed-top {
    z-index: auto;
}

设置 navbar-fixed-top 使其在叠加层下方有一个 z-index。由于菜单包含在 navbar-fixed-top 中，因此它也位于叠加层下方。

Fiddle - http://jsfiddle.net/ju4od25z/

这在 Chrome 中不起作用。你能做的最好的是

.navbar-fixed-top {
    z-index: 1041;
}

这是 1 + 1040（叠加层的 z-index），也会将导航栏带到叠加层上（感谢 boi_echos！）

更好的解决方案是 boi_echos 提供的解决方案。

Answer 2

正确的解决方案是添加 data-container="body" 以附加到 body（就像文档中所说的那样）。我看到了答案here

angular-strap aside 无法在 navbar-fixed-top 上正确显示

angular-strap aside don't display properly on navbar-fixed-top

html

css

twitter-bootstrap

angularjs

angular-strap