Bootstrap css 覆盖自定义 css 样式答案

【问题标题】：Bootstrap css overrides custom css styleBootstrap css 覆盖自定义 css 样式
【发布时间】：2017-12-23 19:43:13
【问题描述】：

我有在 bootstrap.css 和 Site.css 文件中生成的 MVC 5 项目。我正在尝试添加在TWBSColor 上生成的自定义颜色导航栏。我将生成的代码粘贴到位于 Content 文件夹中的 Site.css 文件中。我什至将它命名为 .navbar-custom 而不是通常的 .navbar 或 .navbar-inverse，只是为了确保它与众不同。

在我的 _Layout.cshtml 中有

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

我将必要的内容包裹在

中

<div class="navbar-custom navbar-brand navbar-fixed-bottom">

但如果我使用反向，它仍然显示白色或黑色。如何让我的自定义导航栏工作？

【问题讨论】：

您检查过浏览器的输出吗？您可能有一种相互冲突的风格，您可能需要将其中一种标记为比另一种更重要...
我不知道如何检查，因为当我检查顶级 div 的类是 navbar-custom 并且 bootstrap.css 文件中没有这样的名称，但它仍然没有显示我选的颜色。
确保您的 site.css 文件列在引导 css 之后。如果有任何冲突，则取最后一个条目
我知道，因为当我在纯 html 中写东西时就这样做了，但现在在 _Layout.cshtml 中，我不只是东西，而是只有 @Styles.Render("~/Content/css")。我猜它会调用整个 Content 文件夹，所以我不知道如何检查首先调用哪个 .css 文件。
欢迎来到 StackOverflow，您的问题应该包含 Minimal, Complete and Verifiable Example。使用此链接to learn how to inspect elemetn for CSS。我的猜测是您的自定义 CSS 的特异性低于 Bootstrap 的 CSS 中的那些，因此会失败（不要被应用）。

标签： c# html css asp.net twitter-bootstrap

【解决方案1】：

每当您将引导程序加载到项目中时，您都必须在引导程序之后加载您的自定义 CSS 样式表。下面是一个例子

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Custom CSS File -->
<link rel="stylesheet" href="fileName.css" />

如果这不能解决问题，请查看 CSS Specificity 教程

https://www.youtube.com/watch?v=fy07HYm-geM&index=6&list=PLqGj3iMvMa4IOmy04kDxh_hqODMqoeeCy

【讨论】：

我知道，但问题是我有 ASP.NET 项目，它在 .cshtml 文件中调用所有 css 文件及其 @Styles.Render("~/Content/css")，所以我无法设置首先调用哪个文件。
有没有办法忽略 ASP.net 加载的文件？假设您忽略了自定义样式表，然后在模板视图中手动加载它？（我假设 ASP.Net 是一个框架？我不熟悉）