Ruby on rails 引导进度条背景未更改

我在实现引导进度条时遇到问题

在我看来，我有这条线

<%= raw progress_bar(company.contact_step)%>

我做了一个这样的助手

def progress_bar(step)
  if step.interested
    bg = "bg-danger"
    value = "100"
  elsif  step.sell_sheet_submitted
    bg = "bg-success"
    value = "75"
  elsif step.contact_made
    bg = "bg-success"
    value = "50"
  elsif step.contact_attempted_phone
    bg = ""
    value = "25"
  elsif step.contact_attempted_email
    bg = ""
    value = "10"
  else
    bg = ""
    value = "1"
  end

  pb = %Q[<div class=\'progress\'>
            <div class=\'#{bg} progress-bar \' 
              role=\'progressbar\' 
              style=\'width: #{value}%\' 
              aria-valuenow=\'#{value}\' 
              aria-valuemin=\'0\' 
              aria-valuemax=\'100\'>
            </div>
          </div>]
  end

def进度条（步骤）
如果你感兴趣
bg=“bg危险”
value=“100”
elsif step.sell\u表\u已提交
bg=“bg成功”
value=“75”
elsif步骤。联系您
bg=“bg成功”
value=“50”
elsif步骤。联系电话
bg=“”
value=“25”
elsif步骤。联系\u尝试\u电子邮件
bg=“”
value=“10”
其他的
bg=“”
value=“1”
终止
pb=%Q[
]
终止

因此，它应该根据属性修改进度条值和应用的后台类。如果我检查页面，一切看起来都应该如此

但是，bg success类被进度条类覆盖，因此当我希望进度条为绿色时，进度条为蓝色。我可以点击inspector中背景色旁边的复选框来抑制它，它将变成浅绿色。我错过了什么

编辑： 正如在评论和一个答案中提到的，我两次导入引导程序，所以我去掉了它，但是问题仍然存在，所以这里是检查进度条的新图像。我注意到的一件事是，在我的检查中bg success类的颜色是错误的颜色是#dffod8，而如果我检查引导页面，它应该是 背景色：#5cb85c！重要的

---

我认为问题在于我使用的是引导sass gem，它是引导版本2-3，而我使用的引导进度条形码是版本4。我使用的类是否从v3更改为v4？

问题在于

应用程序中的
css
代码。css

行

15650

和

10930

了解更多有关css特性的信息

您的类

.progress bar

在第

6800行和第
15650行定义了两次，而您的类
.bg success
在第
10930行定义

由于两个
css类
具有相同的特殊性，它们只是html上的一个选择器（类），因此当前的一个将是样式表中的最后一个

这就是
CSS
代表级联样式表的原因

可能您正在导入
应用程序。css
一些引导程序，也可能引导程序有一个名为
.progress bar
的类，在这种情况下，这可能是您在第
15650
行和
10930
行两次使用引导程序sass gem的原因，这是引导程序版本2-3而我使用的引导代码是版本4

因此，我应该使用的代码，实际上，在版本3中，类已经发生了更改

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"></div>
</div>



而在版本4中，它现在是

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>



我想教训是bootstrap版本3和4的代码是不可互换的，我应该更加小心我使用的是什么文档。
不确定，但看起来您可能会包括bootstrap两次？可能是你的问题。