MVC中Bootstrap进度条条纹丢失

Question

<div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
        <span class="sr-only">40% Complete (success)</span>
    </div>
</div>

使用文档中提供的示例，我没有看到进度条上有任何条纹，如何显示它们？

使用MVC 5和Bootstrap v3.2.0。

- TechnoCore

---

这个bootply很好地展示了进度条。你是在使用ASP.NET MVC 5吗？ - Simple Sandman

你在测试哪个浏览器？ - Fizzix

是的，我知道它在Bootply和JSFiddle中可以工作，但它在我的MVC项目中无法工作。我感到相当困惑。已在Chrome、Firefox、IE 11的最新版本中测试了该页面。@simple sandman 是的，ASP.NET MVC 5。 - TechnoCore

Firebug或开发者视图对progress-bar-striped类有何看法？ - Simple Sandman

Answer 1

我刚刚遇到了一些问题，似乎将使进度条动画的两个类（progress-striped和active）从progress-bar移动到父元素progress中完美解决了问题。

如下面的工作示例所示，两者都可以完美地工作。虽然，如果使用MVC渲染，只有下面一个会起作用。 工作示例（下面一个是适合您的） 工作HTML：

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

- Fizzix

---

我在最新版本的Chrome、Firefox和IE 11中进行了测试，它们都是一样的，都缺少条纹。当我使用检查元素时，以上内容是精确的输出。 - TechnoCore

@JonD - 刚刚遇到了同样的问题。找到了解决方案，看看吧。 - Fizzix

哈！这是什么鬼。进度条条纹化应该用progress-striped而不是progress-bar-striped。非常感谢。我想点赞但貌似声望还不够。 - TechnoCore

@TechnoCore - 是啊，非常奇怪哈哈。算了，总之我想通了。 - Fizzix