我有使用fixed
positon属性的常用引导程序导航菜单和一个进度条。但导航菜单顶部不显示进度条。我尝试过使用z-index
,但它没有任何用处。
代码是这样的:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
...
...
</div>
<div class="container" id="sim-progress">
...
...
</div>
我在进度条中添加了一些自定义css。我已在此jsfiddle中演示了此问题。我想在导航菜单上显示进度条。关于我做错了什么想法?
答案 0 :(得分:1)
所有必要的是将进度条放入 nabvar div并根据需要定位。
JSFiddle Demo(基本)
<强> HTML 强>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse"><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="#">Test</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a>
</li>
</ul>
</div>
</div>
<div class="container" id="sim-progress">
<div class="progress progress-striped active sim-pro">
<div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"><span class="sr-only">45% Complete</span>
</div>
</div>
</div>
</div>