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

【问题标题】：Putting a Twitter Bootstrap progress bar inside a navbar将 Twitter Bootstrap 进度条放在导航栏中
【发布时间】：2013-07-03 13:11:44
【问题描述】：

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

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

【问题讨论】：

标签： twitter-bootstrap

【解决方案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>

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

【讨论】：

【解决方案2】：

在引导程序 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>

【讨论】：