CSS进度条无法正常显示

Question

我正在尝试使用Rails中的CSS和HTML创建测验，但我无法使进度条正常工作。它正在使用bootstrap，但我想知道它的css或bootstrap是否使它无法正常工作。当我将我的代码放入jsfiddle时，它工作正常，并显示为圆圈，但当我在rails中尝试它只有一个固定的进度条。

CSS

@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;
}

HTML

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