gpt4 book ai didi

css - 无法使用我自己的样式表覆盖 Bootstrap 样式

转载 作者:行者123 更新时间:2023-12-04 12:49:39 25 4
gpt4 key购买 nike

ASP MVC RAZOR

我尝试覆盖 bootstrap 默认样式。我声明我的样式表如下:

 /*bootstrap and default style*/
@Styles.Render("~/Content/css");
/*My CSS*/
<link href="@Url.Content("~/css/main.css")" rel="stylesheet" type="text/css" />
@RenderSection("Styles", required: false)

在 bundleconfig 中:(仅默认样式)
       bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css" ));

但是正如你在下面看到的,我的风格被 bootstrap 覆盖了。

Inspector

我认为这与 head 标签中的样式顺序有关。但是我的是在 bootstrap 之后,所以它应该可以工作......

我复制了完整的布局页面,以便您可以查看发生了什么。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title</title>
<link href="@Url.Content("https://fonts.googleapis.com/css?family=Roboto")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("https://fonts.googleapis.com/css?family=Tangerine")" rel="stylesheet" type="text/css" />
@Styles.Render("~/Content/css");
<link href="@Url.Content("~/css/main.css")" rel="stylesheet" type="text/css" />
@RenderSection("Styles", required: false)



</head>
<body>

<div class="cachetop col-lg-12 navbar-fixed-top"></div>
<div class=" topmenubar navbar navbar-default navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

<a class="navbar-left " href="@Url.Action("Accueil","Home")">
<img src="@Url.Content("../img/minilogo.png")" />
</a>

</div>
<div class=" navbar-collapse collapse">
<ul class="menuitembar nav navbar-nav">
<li class="menuitem nav-item active">@Html.ActionLink("Notre carte", "pizzas", "Carte", null, new { @class = "nav-link" })</li>
<li class="menuitem nav-item">@Html.ActionLink("Nous trouver", "Localisation", "Home", null, new { @class = "nav-link" })</li>
<li class="menuitem nav-item">@Html.ActionLink("Un peu d'histoire", "Histoire", "Home", null, new { @class = "nav-link" })</li>
<li class="menuitem nav-item">@Html.ActionLink("Travailler chez Michel", "Workwith", "Home", null, new { @class = "nav-link" })</li>

</ul>

</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<div class="text-center">
<p>

</p>
</div>
</footer>

</div>


@Scripts.Render("~/bundles/jquery")
@RenderSection("Javascript", required: false)
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/modernizr")

</body>
</html>

最佳答案

如果你让你的 CSS 选择器更具体,有一个级别 specificity这决定了应用哪些样式。这样做:

li.menuitem { color: black; }

使它更具体。同时添加 !important表示此样式具有优先权:
.menuitem { color: black !important; }

小心嵌套的 CSS 层次结构并使用 !important。如果您想在不同的上下文中覆盖这些更改,则可能会导致问题。只在必要时使用,但使用是可以的。

关于css - 无法使用我自己的样式表覆盖 Bootstrap 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40867665/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com