Question

我正在使用角带来显示菜单，该菜单是使用bootstrap 3从导航栏上的按钮打开的。一切正常。但是，在我将navbar-fixed-top类放入导航栏后，它无法正常显示。

HTML code：

<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

正确的解决方案是添加data-container =“body”以附加到body（只是llike文档说）。我看到了答案here

Answer 2

只需在CSS的末尾添加以下内容

var json= [
{
    "machineNum": "1A",
    "serialNo": "123",
    "city": ""
},
{
    "machineNum": "2B",
    "serialNo": "",
    "city": ""
},
{
    "machineNum": "3A",
    "serialNo": "123",
    "city": "NewCity"
}
]

 var newJson=json.replace("","Not AVailable");
 console.log(newJson);

设置navbar-fixed-top会在叠加层下面显示一个z-index。由于菜单包含在navbar-fixed-top中，因此它也位于叠加层之下。

小提琴 - http://jsfiddle.net/ju4od25z/

这不适用于Chrome。你能做的最好的就是

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

是1 + 1040（叠加的z索引），也会将导航栏放在叠加层上（感谢boi_echos！）

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

另外，在导航栏固定顶部无法正确显示角带

2 个答案: