在导航栏中放置Twitter Bootstrap进度条

Question

我想使用jPlayer和Twitter Bootstrap编写一个小型音乐播放器。对于控件，我使用了带有图标按钮的导航栏组件。为了显示当前歌曲的位置，我想使用进度条，但当我将其放置在导航栏内时，它会停留在顶部。

到目前为止，我正在使用以下代码：http://jsfiddle.net/m5Lkk/1/

<div class="container">
    <div class="navbar navbar-static-top">
        <div class="navbar-inner">
            <ul class="nav">
                <li><a href="#"><i class="icon-play"></i></a></li>
                <li><a href="#"><i class="icon-stop"></i></a></li>
            </ul>
            <div class="nav navbar-text progress" style="width: 300px;">
                <div class="bar" style="width: 30%;"></div>
            </div>
            <p class="nav navbar-text pull-right">13:37</p>
        </div>
    </div>
</div>

有人知道如何使进度条在导航栏内垂直居中吗？

- Squall

Answer 1

我知道这很糟糕，但这个怎么样： http://jsfiddle.net/m5Lkk/9/

<div class="container">
    <div class="navbar navbar-static-top">
        <div class="navbar-inner">
            <ul class="nav">
                <li><a href="#"><i class="icon-play"></i></a></li>
                <li><a href="#"><i class="icon-stop"></i></a></li>
            </ul>
            <div class="nav navbar-text progress" style="width: 300px; margin-top:10px">
                <div class="bar" style="width: 30%;"></div>
            </div>
            <p class="nav navbar-text pull-right">13:37</p>
        </div>
    </div>
</div>

我基本上添加了一个边距，这样它就会向下推一点。

- Sandeep Bansal

Answer 2

在Bootstrap 4中，Sandeep Bansal的解决方案似乎不再起作用（进度条，但没有填充）。我是这样让它工作的：为具有“progress”类的周围div添加固定宽度。将该div放在< ul >标签之外。

例如：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Brand</a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#" target="_blank">Link</a>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="#" target="_blank">Link</a>
            </li>
        </ul>
        <div class="progress" style="width: 50em"> <!-- 50em = half the screen width -->
            <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
    </div>
</nav>

- askuri