引导程序进度条背景不变

我在实现引导程序进度条时遇到问题。引导程序进度条背景不变

在我看来

我有

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

编辑： 在评论中提到和一个答案我是进口自举这么两次我摆脱了这一点，但问题仍然存在，所以这里是检查进度条的新形象。我注意到的一件事是，bg-success类的颜色在我的检查中是错误的，颜色是＃dffod8，而如果我检查0123,的引导页，它应该是 background-color：＃5cb85c！important

我认为问题是，我使用的是引导，萨斯宝石是引导版本2-3，同时引导进度条的代码，我从工作是第4版是类我使用从改变v3到v4？

来源

2017-09-15 mkrinblk

不确定，但看起来像你可能包括bootstrap两次？可能会导致你的问题。 – Mark

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

你的类.progress-bar被定义了两次，在线6800和15650，而你.bg-success类在行10930定义。

由于两个css classes具有相同的特征，它们只是html上的单个选择器（类），所以通用的一个将是样式表中的最后一个。

这是CSS代表级联样式表

也许你是一些引导进口在applications.css的原因，也许还引导有一类叫做.progress-bar在这种情况下，它可能是你有两次的原因在行15650和10930

来源

2017-09-16 02:23:03

所以问题是我使用bootstrap-sass gem是引导版本2-3，而我正在使用的引导程序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代码不可互换，我应该更仔细地使用我正在使用的文档。

来源

2017-09-18 20:20:54 mkrinblk

引导程序进度条背景不变

回答

相关问题