Question

我有使用fixed positon属性的常用引导程序导航菜单和一个进度条。但导航菜单顶部不显示进度条。我尝试过使用z-index，但它没有任何用处。

代码是这样的：

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
...
...
</div>
<div class="container" id="sim-progress">
...
...
</div>

我在进度条中添加了一些自定义css。我已在此jsfiddle中演示了此问题。我想在导航菜单上显示进度条。关于我做错了什么想法？

Answer 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>

Bootstrap Progressbar在导航菜单顶部不可见

1 个答案: