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>

我基本上增加了一个保证金，所以它会把它推下来。

Answer 2

在引导程序4中，Sandeep Bansal的解决方案似乎不再起作用（进度条，但没有填充

我的工作方式是这样的：在其中包含var layoutSunChart = {title: 'Solar Events by Time', barmode: 'relative', bargroupgap: 0.4, yaxis: {type: 'category', autorange: "reversed", fixedrange: true, showgrid : false, automargin: true, }, xaxis : { tickmode: "linear", tick0: 0, dtick: 8640000, // milliseconds fixedrange: true, zeroline : false, showgrid : false, automargin: true, title: 'Time (hh:mm)' }, autosize: true, showlegend: false, paper_bgcolor: '#E9ECEF', plot_bgcolor:'rgba(0,0,0,0)', //hovermode: 'closest', staticPlot: true, }类的周围div中添加固定宽度。将该div放在progress标签之外。

例如：

<ul>

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

2 个答案: