3

我想用 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>

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

4

2 回答 2

5

我知道它很脏，但是这个呢：

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>

我基本上添加了一个边距，所以它向下推了一点。

于 2013-07-05T12:28:13.643 回答
0

在引导程序 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>
于 2020-05-24T12:49:40.853 回答