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），这个课程是进步条纹的＆＃39; （不是像文档所说的那样，进展条纹条纹）以及它和“活跃的”＃39; 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" 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 4

如果您使用的是Bootstrap v4且需要设置动画，则需要使用progress-bar-animated代替active。

Answer 5

<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>

以此进度动画将起作用。

bootstrap进度条不工作

5 个答案: