twitter-bootstrap - 将 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>

有谁知道我如何让进度条在导航栏内垂直居中？

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>

我基本上添加了一个边距，所以它把它压低了一点。