引导进度条没有进度

Answer 1

本次聚会迟到了，但在我使用的 Bootstrap 版本（v3.1.1）中，该类是“progress-striped”（不是像文档所说的“progress-bar-striped”），并且它和“active” ' 类必须应用于外部 div:

<div class="progress progress-striped active">
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">Some text</div>
</div>

Answer 2

查看 CSS，选择器“progress-bar”已更改为“bar”：

./bootstrap.css:

.progress {
...
}

.progress .bar {
...
}

因此，将您的代码更改为

<div class="progress">
  <div class="bar">
  </div>
</div>

然后就可以了。

不确定这种疯狂的原因是什么，似乎引导文档还没有更新。

Answer 3

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>

这样进度动画就可以工作了。

Answer 4

<div class="progress">
 <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
   <span class="sr-only">60% Complete</span>
 </div>
</div>

上面是 bootstrap v3.1.1 的代码，看起来你的进度条 div 缺少一些元素？

Answer 5

如果您使用 Bootstrap v4 并且需要动画，则需要使用

progress-bar-animated

而不是

active

。