如何更改Bootstrap 3模式的CSS樣式？

我無法改變Bootstrap 3模式的風格。如何更改Bootstrap 3模式的CSS樣式？

我在css文件試過這樣：

.modal .modal-dialog { 
    width: 150px; 
    background-color: blue; 
}

但我沒有得到結果。

爲什麼它不起作用？我怎麼能改變Bootstrap 3模式？

這裏可以前往標籤：

<head> 
    <meta http-equiv="Content-Language" content="pt-br"> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <!--<meta name="csrf-token" content="">--> 

    <title>Home</title> 

    <!-- jQuery --> 
    <script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script> 

    <!-- jQueryUI --> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 




    <!-- Bootstrap --> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" /> 
    <!-- Optional theme --> 
    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous" />--> 
    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 

    <!-- React --> 
    <script src="js/react/build/react.js"></script> 
    <script src="js/react/build/react-dom.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 

    <!-- Font Awesome --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css"> 

    <!-- App Styles --> 
    <link rel="stylesheet" href="/css/styles.css" /> 

    <!-- jQueryMask --> 
    <script src="js/jquery.mask.js"></script> 

    </head>

更新：我可以通過內嵌樣式做。這是醜陋的，但工程！

來源

2016-05-08 Natanael

我建議打開Chrome，Safari或FireFox的開發者窗口來調查爲什麼你的樣式沒有被應用。所有三種瀏覽器都應該支持'右鍵單擊>>檢查元素'，它將顯示所選元素的應用（或覆蓋）樣式。 – ManBearPixel

由於我從桌面打開文件，而不是從服務器打開文件，因此我使用的是Firefox。檢查元素顯示沒有任何相關。我可以更改組件的背景顏色，例如Alert，但不能更改Modal的背景顏色。 – Natanael

更新：我可以通過內聯樣式。這是醜陋的，但工程！ – Natanael

.modal .modal-dialog { 
    width: 150px; 
    background-color: blue; 
}

你忘了把PX在150年底

來源

2016-05-08 23:03:15 Alqin

謝謝！我已經糾正它。但這不是問題的原因。 – Natanael

好的。也許是@Sators建議，你的css在bootstrap之前加載。 – Alqin

確保您添加的類的引導CSS文件後加載...

來源

2016-05-08 23:03:41 Sators

是的，我的css文件是在bootstrap文件後面聲明的。 – Natanael

錯誤：

<link rel="stylesheet" href="/css/styles.css" />

正確：

<link rel="stylesheet" href="css/styles.css" />

來源

2016-05-09 15:25:21 Natanael

如何更改Bootstrap 3模式的CSS樣式？

回答

相關問題