bootstrap进度条不工作

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)中,该类是"进度条纹"(不是像文档所说的"进度条纹")以及它和'活动' class必须应用于外部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 缺少一些元素？