twitter-bootstrap 引导进度条不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22185852/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap progress bar not working
提问by kobosh
bootstrap progress bar is not working on my mvc index view I have tried it with chrome and ie.
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 »</a></p>
</div>
<div class="row">
<div class="col-md-4">
<h2>Getting started</h2>
<div class="progress-bar progress-striped "></div>
</div>
</div>
回答by Grim...
Late to this party, but in the version of Bootstrap I'm using (v3.1.1) the class was 'progress-striped' (not 'progress-bar-striped' like the Docs say) and both it and the 'active' class had to be applied to the outer div:
这个派对晚了，但在我使用的 Bootstrap 版本 (v3.1.1) 中，该类是“progress-striped”（而不是 Docs 所说的“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>
回答by Tronathan
Looking at the CSS, the selector "progress-bar" has been changed to "bar":
查看 CSS，选择器“progress-bar”已更改为“bar”：
./bootstrap.css:
.progress {
...
}
.progress .bar {
...
}
So, change your code to
因此，将您的代码更改为
<div class="progress">
<div class="bar">
</div>
</div>
Then it will work.
然后它会起作用。
Not sure what reasoning there is for this insanity, seems like the bootstrap docs just havent been updated.
不确定这种疯狂的原因是什么，似乎引导程序文档还没有更新。
回答by Tronathan
<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>
Above is the code from bootstrap v3.1.1 looks like you're progress bar div is missing some elements?
上面是 bootstrap v3.1.1 的代码，看起来你的进度条 div 缺少一些元素？
回答by John Galt
If you are using Bootstrap v4 and need to animate, you will need to use progress-bar-animatedinstead of active.
如果使用的是引导v4和需要动画，你将需要使用progress-bar-animated代替active。
回答by Ronel Kpossou
<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>
With this the progress animation will work.
有了这个，进度动画就可以工作了。
