Bootstrap Fortschrittsbalkenhintergrund ändert sich nicht

Question

Ich habe Probleme mit der Implementierung eines Bootstrap-Fortschrittsbalkens.

aus meiner Sicht habe ich die Linie

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

Ich mag diesen So basiert

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 

einen Helfer, die auf den Attributen sollte es um den Fortschrittswert und die Hintergrundklasse zu ändern, das angewandt wird, . Wenn ich inspizieren die Seite sieht alles wie es sollte

Allerdings ist die bg-Erfolg Klasse von der Fortschrittsbalken Klasse überschrieben werden, so dass die Bar blau ist, wenn ich es grün sein wollen. Ich kann das Kontrollkästchen neben der Hintergrundfarbe im Inspektor drücken, um es zu unterdrücken, und es wird hellgrün. Was vermisse ich?

EDIT: wie in den Kommentaren erwähnt wurde und eine Antwort, die ich importiere Bootstrap zweimal so habe ich mich davon befreien, aber das Problem besteht immer noch so ist hier das neue Bild von den Fortschrittsbalken Inspektion. Eines der Dinge, die ich bemerkte, ist, dass die Farbe für bg-Erfolgsklasse falsch ist in meiner Inspektion ist die Farbe # dffod8, während wenn ich die Bootstrap-Seite für progress bars begutachten sollte es Hintergrundfarbe: # 5cb85c! Wichtig sein

ich denke, das Problem ist, dass ich die Bootstrap-Sass gem bin mit der 2-3 Bootstrap-Version ist, während der Bootstrap-Fortschrittsbalken Code, den ich aus arbeite, ist Version 4. wurden die Klassen I geändert sind mit von v3 bis v4?

Answer 1

Das Problem ist Ihr css Code in application.css Zeile 15650 und 10930.

Um mehr über CSS Spezifität

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

Ihre Klasse .progress-bar definiert wird zweimal in Zeile 6800 und 15650 zu lernen, während die Klasse .bg-success in Zeile 10930 definiert ist.

Da die beiden css classes die gleiche Spezifität haben, sind sie nur ein einziger Selektor (Klasse) auf einem HTML, der vorherrschende wird der letzte im Stylesheet sein.

Dies ist der Grund CSS für Kaskade Stylesheets steht

Wahrscheinlich in applications.css einige Bootstrap importieren Sie und vielleicht auch Bootstrap eine Klasse .progress-bar und in diesem Fall genannt hat, kann es der Grund, warum haben Sie es zweimal sein in Zeile 15650 und 10930

Answer 2

so ist das Problem, dass ich das Bootstrap-Sass Juwel wurde mit der 2-3 Bootstrap-Version ist, während der Bootstrap progress bar v4 Code, den ich aus arbeite, ist Version 4.

so dass der Code, den ich für die progress bar v3 verwenden sollten, und in der Tat die Klassen in 3-Version geändert hätte es

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

sein, während in der Version 4 nun

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

I ist die erraten Lektion ist Bootstrap Version 3 ein 4-Code ist nicht austauschbar und ich sollte vorsichtig sein, welche Dokumentation ich verwende.