ブートストラップの進行状況バーの背景が変更されない

Question

ブートストラップの進行状況バーの実装に問題があります。私の見解で

私はだから、プログレスバーの値と適用され、バックグラウンドクラスを変更する必要があります属性に基づいて、この

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 

のようにヘルパーを作っライン

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

を持っています。ページをすべて調べると、すべてがそうであるはずです

しかし、bg-successクラスはプログレスバークラスによってオーバーライドされています。インスペクタの背景色の隣にあるチェックボックスを押して、それを抑止すると、緑色に変わります。私は何が欠けていますか？

EDIT：コメントの中に言及されたと私は、ブートストラップインポートされた1つの答えは二回ので、私はそれを処分したが、問題はまだプログレスバーを検査する新しいイメージがあるので、ここで存在するよう 。私が気づいたことの1つは、bg-successクラスの色が私の検査で間違っているということです。色は＃dffod8です。progress barsのブートストラップページを調べると、 背景色：＃5cb85c！important

私は、問題は、私はから働いていたブートストラッププログレスバーコードはバージョン4である一方で、私は、ブートストラップバージョン2-3でブートストラップ・サス宝石を使用しています私が使用していたクラスから変更されたということだと思います

v3からv4？

Answer 1

cssのコードは、application.cssの行15650と10930です。

クラス.bg-successがライン10930で定義されている間あなたのクラス.progress-barは、ライン6800と15650で、二回定義されて

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

CSSの特異性についての詳細を学ぶために。

2つのcss classesは同じ特異性を持っているため、htmlのセレクタ（クラス）は1つで、スタイルシートの最後のセレクタです。

このカスケードスタイルシート

の略CSS理由はおそらく、あなたがapplications.cssでいくつかのブートストラップをインポートすると、おそらくまた、ブートストラップされ.progress-barというクラスがあり、その場合には、それはあなたが二回、それを持っている理由かもしれません行15650と10930

Answer 2

にので、問題は私が勤務したブートストラップprogress bar v4コードバージョン4であるが、ブートストラップバージョン2-3でブートストラップSASS GEMを用いたことです。

ので、私はprogress bar v3のために使用されなければならないコードと実際のクラスは、バージョン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> 

ている間、それは

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

になり、バージョン3に変更されている、私は推測しますレッスンはブートストラップバージョン3です.4コードは互換性がないので、私が使用しているドキュメントをより慎重にする必要があります。