CSS類不覆蓋引導程序
[英]CSS class not overriding bootstrap
問題描述
我正在使用在VS2017中創建的默認MVC項目。 所以我有默認的Bootstrap.css和我的Site.css文件。
在_Layout.cshtml文件中，我插入了圖像
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<img class="jamClass" src="~/Content/Images/Gravit_Bridge_Sync.svg"/>
</div>
</div>
</div>
圖像顯示正常，但是我嘗試使用Site.css文件（即jamClass實現尺寸更改-而不是直接編寫尺寸更改。
在我的site.css我嘗試增加“優先級”，似乎可以解決許多這樣的問題，但是我無法進行任何更改注冊。
我試過了：
a.jamClass{width:50px}
#.jamClass{width:50px}
.jamClass{wdith:50px}
我想我可能會走錯路了。 我什至不確定Site.css是否有任何影響，但是我不想更改bootstrap.css文件嗎？
令人沮喪的是，它很容易內聯，但是我正在嘗試以“適當”的方式來做！
EDIT和ANSWER WOW這不起作用的真正原因是因為在BundleConfig文件中沒有正確引用默認創建的Site.css這是小寫字母s
在這里找到我的建議。
5 個解決方案
解決方案1
1 2019-02-08 10:38:50
a.jamClass{width:50px !important;}
.jamClass{wdith:50px !important;}
使用此！important覆蓋現有的CSS文件
注意 -刪除了#.jamClass{width:50px !important;}因為它不是有效的選擇器，您應該僅將。（句點）用於類＃，用於id
解決方案2
1 2019-02-08 10:40:36
您需要像這樣使選擇更強
.navbar.navbar-inverse.navbar-fixed-top .container .navbar-header img.jamclass { /* your code goes here */ }
<div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <img class="jamClass" src="~/Content/Images/Gravit_Bridge_Sync.svg"/> </div> </div> </div>
或者您可以使用!important ，但是我會仔細閱讀使用！important的問題。
這是一個很好的閱讀- 鏈接
解決方案3
1 2019-02-08 10:43:47
您可以嘗試以下CSS規則之一嗎？
img.jamClass{ width:50px; }
要么
.navbar-header img{ width:50px; }
解決方案4
1 已采納 2019-02-08 10:46:19
您在圖片上使用.jamClass ，則樣式應類似於
img.jamClass { width: 50px; } img.jamClass { width: 50px; }如果這不起作用，請嘗試使用更多的父類來達到先前的高位。
.navbar-header img.jamClass { width: 50px; } .navbar-header img.jamClass { width: 50px; }或
.navbar .navbar-header img.jamClass { width: 50px; }
注意：您應該嘗試不使用!important
解決方案5
0 2019-02-08 11:37:40
原來我的問題是根本沒有引用Site.css文件。
在默認創建的MVC項目中，BundleConfig將其site.css為site.css （小寫），但是將文件創建為Site.css大寫-就這么簡單！
請在這里找到我的建議。
避免CSS覆蓋引導
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.