Html CSS进度条显示不正确

我正在尝试在Rails中使用CSS和HTML创建一个测验，但是我无法让进度条正常工作。它使用的是引导，但我想知道是css还是引导使它不能按预期工作。当我将代码放入JSFIDLE时，它运行良好，并显示为圆圈，但当我在rails中尝试时，它只有一个固定的进度条

CSS

HTML

测试你的知识

进度

类出现在引导中，使用另一个类，如

自定义进度

进度

类出现在引导中，使用另一个类，如

自定义进度

。

@import "bootstrap-sprockets";
@import "bootstrap";
@import "bootstrap/theme";

/*Progress Rec Quiz styling */

#myQuiz .progress  {
  width: 550px;
  position: absolute;
  top: 160px;
  left: 40px;
}

#myQuiz .progress div {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 30px;
  border-radius: 50%;
  background-color: rgba(255,255,255,.2);
  transition: background-color 1s;
  left: 40px;
}

<div id="myQuiz">
  <h1>Test your knowledge <span>Loser</span></h1>
  <div class="progress">
    <div class="on" ></div>
    <div class="on" ></div>
    <div class="on" ></div>
    <div class="on" ></div>
    <div class="on" ></div>
    <div class="on" ></div>
    <div class="on" ></div>
    <div class="on" ></div>
    <div class="on" ></div>
    <div class="on" ></div>
  </div>
</div>