Question

我正在使用在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文件吗？

令人沮丧的是，它很容易内联，但是我正在尝试以“适当”的方式来做！

编辑和答案 WOW 无效的真正原因是因为默认创建的我的Site.css在BundleConfig文件中没有正确引用-它是小写的s

有关我在哪里找到建议的信息，请参见here。

Answer 1

#.jamClass{width:50px !important;}

使用此！important覆盖现有的CSS文件

注意-已删除id，因为它不是有效的选择器，您只能使用。（句号），类别＃适用于rowTextView.setCompoundDrawablesRelativeWithIntrinsicBounds(0, 0, R.drawable.ic_call_black_24dp, 0);

Answer 2

您需要像这样增强选择范围

.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的问题。

这是一本好书-link

Answer 3

您可以尝试以下CSS规则之一吗？

img.jamClass{
  width:50px;
}

或

.navbar-header img{
  width:50px;
}

Answer 4

您在图片上使用.jamClass，则样式应为

img.jamClass { width: 50px; }如果不起作用，请尝试使用更多的父类来达到更高的水平。

.navbar-header img.jamClass { width: 50px; }或

.navbar .navbar-header img.jamClass { width: 50px; }

注意：您应该尝试不使用!important

Answer 5

原来我的问题是根本没有引用Site.css文件。

在默认创建的MVC项目中，BundleConfig将其命名为site.css（小写），但是将文件创建为Site.css大写-它很简单那!!!!

请在here中找到我的建议。

CSS类不覆盖引导程序

5 个答案: