Question

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

在我看来，我有一行

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

因此，基于属性，它应该修改进度条值和应用的背景类。如果我检查页面，看起来应该是

但是，bg-success类被进度条类重写，因此当我希望它为绿色时，条形图为蓝色。我可以点击检查器中背景颜色旁边的复选框来抑制它，它会变为浅绿色。我错过了什么？

修改正如在评论和一个答案中提到的那样，我两次导入bootstrap，所以我摆脱了但问题仍然存在，所以这里是检查进度条的新图像。我注意到的一件事是bg-success类的颜色在我的检查中是错误的，颜色是＃dffod8，而如果我检查progress bars的引导页面它应该是 background-color：＃5cb85c！important

我认为问题在于我使用bootstrap-sass gem是bootstrap 2-3版，而我正在使用的bootstrap进程条形码是版本4.我使用的类是从v3更改为v4吗？

Answer 1

所以问题是我使用的bootstrap-sass gem是bootstrap版本2-3，而我使用的bootstrap progress bar v4代码是版本4.

所以我应该为progress bar v3使用的代码，实际上版本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代码不可互换，我应该更加小心我正在使用的文档。

Answer 2

问题在于css行application.css和15650中的10930代码。

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

https://duckduckgo.com/?q=css+specificity&atb=v52-6_b&ia=web

您的课程.progress-bar已定义两次，位于第6800行和15650，而您的课程.bg-success则在第10930行定义。

由于两个css classes具有相同的特异性，它们只是html上的一个选择器（类），一个流行的将是样式表中的最后一个。

这就是CSS代表级联样式表

的原因

可能你正在导入applications.css一些引导程序，也许引导程序有一个名为.progress-bar的类，在这种情况下，它可能是你在行15650和{10930两次得到它的原因{1}}

Bootstrap进度条背景不变

2 个答案: