覆蓋具有外部CSS的Bootstrap主按鈕

有以下CSS代碼，並希望在按鈕處於「活動」狀態（意思是按下）時將引導按鈕從其默認「藍色」顏色更改爲值954900;但它保持藍色並且不變。複製了教程中的代碼，並明白您需要「覆蓋所有案例」，但我在這裏錯過了什麼？注意：我確保在頭部包含外部樣式表AFTER引導CSS鏈接。感謝所有幫助..覆蓋具有外部CSS的Bootstrap主按鈕

.btn:focus, .btn:active:focus, .btn.active:focus { 
outline: 0 none;} 

.btn-primary { 
background: #EC811C; 
color: #ffffff;} 

.btn-primary:hover , .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { 
background: #F89F4A;} 

.btn-primary:active, .btn-primary.active { 
background: #954900; 
box-shadow: none;}

HTML

<button type="submit" name="submit" class="btn btn-primary btn-lg btn-block">Search</button>

來源

2016-12-03 Retro

嘗試 '愛我恨'。即：a：鏈接，a：已訪問，a：重點，a：懸停，a：主動。（這應該是訂單） –

可能是一個特殊問題。請分享相關的html和css，這將使我們能夠重現問題。 –

好點@HiddenHobbes我編輯了我的帖子 – Retro

一定要包括你的custome CSS引導之後也嘗試加入後的重要規則，每一個，看它是否幫助！像

.btn-primary:active, .btn-primary.active { 
    background: #954900 !important; 
    box-shadow: none !important; 
}

編輯：剋日什托夫·如在DABROWSKI他的評論說，重要的不是正確的解決方案，它更像一個的調試技巧，以確認你正在編輯正確的CSS規則。如果它適用於！重要，你應該確認你的CSS文件被加載後，一個作爲web瀏覽器的boostrap優先於最後一個讀取css規則。

如果它不能解決您的問題，請分享更多的代碼。

來源

2016-12-03 23:17:38 Nils

請不要添加'！mportant'。你應該避免它。在這種情況下，沒有必要這樣做。如果你在Bottstrap之後放置你的CSS，你將不需要'！important'。 –

如果您正在使用的版本Sass的Bootstrap，您可以使用button-variant混入。如果你必須使用普通的CSS，你可以看看這個mixin的內容，並以相同的順序以完全相同的方式寫入。那麼一切都應該100％兼容和覆蓋。

的混入是在這裏：

https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_buttons.scss

來源

2016-12-03 23:15:59

感謝所有，這是對我工作：

.btn:focus, .btn:active:focus, .btn.active:focus { 
outline: 0 none;} 
.btn-primary { 
background: #EC811C; 
color: #ffffff;} 
.btn-primary:hover , .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { 
background: #F89F4A;} 
.btn-lg:active, .btn-lg.active, .btn-block:active, .btn-block.active, .btn-primary:active, .btn-primary.active { 
background: #954900 !important; 
box-shadow: none !important;}

來源

2016-12-03 23:21:01 Retro

覆蓋具有外部CSS的Bootstrap主按鈕

回答

相關問題