如何覆蓋bootstrap？

bootstrap3和自定義css文件都從靜態目錄本地加載。
Bootstrap在自定義css文件之前加載。
當引導鏈接被註釋掉時，自定義CSS規則適用，因此證明自定義CSS路徑是正確的。
當引導程序和自定義CSS都加載時，大多數自定義CSS規則不適用，例如，改變導航欄的顏色。
- 我已經能夠使一些自定義CSS規則的工作，但不知道如何，但。一些規則工作得很好，其他規則沒有。我想這些規則與引導規則不矛盾。
試圖ID標籤，類標籤，！重要，但問題仍然存在。

任何解決方案？我做錯了什麼？如何覆蓋bootstrap？

原始代碼太長，我做了一個簡單的例子（這個時候，使用引導CDN鏈接）：

#navbar_test { 
 
    background-color: red !important; 
 
    color: blue; 
 
} 
 

 
#text_test { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<nav id="navbar_test" class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#"> 
 
     <img alt="Brand" src="..."> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</nav> 
 

 
<p id="text_test">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

來源

2017-07-19 Gnoliz

的[重寫引導CSS最佳方式]（https://stackoverflow.com/questions/20721248/best-way-to-override-bootstrap-css）可能的複製 –

必須有一個然後在別處問題。你能複製這個問題給我們看嗎？ – Chris

您應該在自定義css中使用！important並從瀏覽器中清除緩存。 –

它似乎是更改導航欄中背景的關鍵是與background-image相關聯的.navbar-default上的漸變。如果您將none應用於該房產，您應該獲得理想的效果。

.navbar-default{ 
    background-color: red; 
    background-image: none; 
}

其他替代應該正常工作，你用文字顏色變化看到了。

DEMO

來源

2017-07-19 03:46:09

謝謝喬！這工作！ – Gnoliz

@ZilongL樂於幫忙！我建議在這種情況下，因爲'已標記'的答案沒有回答你的問題，你可以將答案轉換爲這個答案，以幫助其他可能有類似問題的用戶。 –

是的。如果我問另一個新手問題，可能嗎？當我可以用html樣式屬性覆蓋引導程序時發生了什麼，但不是一個單獨的css文件。我知道css文件路徑是正確的，因爲一些規則仍然適用，並且它在html頭部的引導和引導主題後加載。試過ID標籤，沒有運氣。提前謝謝了！ – Gnoliz

-2

可以覆蓋引導CSS中的一些元素在您的自定義css文件中使用！重要：

element { 
    background-color: red !important; 
}

來源

2017-07-19 02:38:47 Ali

如果可能的話，應該避免使用'！important'。 –

感謝您的回答，但我已經說過「5.試過id標籤，class tags，！重要，但問題依然存在。」 – Gnoliz

@ZilongL如果'！important'不適合你，你爲什麼接受這個答案？ – Swellar

如何覆蓋bootstrap？

回答

相關問題