引导进度条背景没有改变答案

【问题标题】：Bootstrap progress bar background not changing引导进度条背景没有改变
【发布时间】：2017-09-15 22:08:30
【问题描述】：

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

在我看来，我有这条线

<%= 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 类已被进度条类覆盖，因此当我希望它为绿色时，该条为蓝色。我可以点击检查器中背景颜色旁边的复选框来抑制它，它会变成浅绿色。我错过了什么？

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

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

【问题讨论】：

不确定，但看起来您可能包含两次引导程序？可能会导致您的问题。

标签： ruby-on-rails twitter-bootstrap

【解决方案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>

我想教训是引导版本 3 和 4 代码不可互换，我应该更加小心我使用的文档。

【讨论】：

【解决方案2】：

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

要了解有关 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 行有两次的原因

【讨论】：