引導程序進度條背景不變

我在實現引導程序進度條時遇到問題。引導程序進度條背景不變

在我看來

我有

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

引導程序進度條背景不變

回答

相關問題