Ввод шага индикатора загрузки Bootstrap внутри навигатора

Question

Я хочу написать небольшой музыкальный плеер с jPlayer и Twitter Bootstrap. Для элементов управления я использую компонент navbar с иконками в качестве кнопок, чтобы отображать позицию в текущей песне, я хочу использовать индикатор выполнения, но когда я помещаю его в навигационную панель, он застревает сверху.

До сих пор я работаю с этим кодом: 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> 

Кто-нибудь знает, как я получаю прогресс бар verically центрированный внутри навигационной панели?

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> 

Я в основном добавил запас, так что толкает его немного вниз.