引导进度条不起作用

Question

bootstrap 进度条在我的 mvc 索引视图上不起作用我已经用 chrome 和 ie 尝试过。

@{
    ViewBag.Title = "Home Page";
}

<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="http://asp.net" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
</div>

<div class="row">
    <div class="col-md-4">
        <h2>Getting started</h2>
     <div class="progress-bar progress-striped "></div>
    </div>

</div>

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 。