在 ASP.NET MVC 显示问题中更改引导主题
Posted
技术标签:
【中文标题】在 ASP.NET MVC 显示问题中更改引导主题【英文标题】：Changing Bootstrap Themes in ASP.NET MVC display issues 【发布时间】：2018-07-12 13:00:32 【问题描述】：我有一个 MVC 项目，我已将默认 Bootstrap 主题更改为 Bootswatch - Cosmos，但它为我提供了导航栏的附加结果。
Header display issue image
最初我运行的是 Bootstrap 3.0，并使用 Bootswatch 3.0 来确保没有版本冲突。
我已采取以下步骤：
-
将 cosmos-boostrap.css 和 cosmos-boostrap.min.css 添加到内容文件夹
引用我的 BundleConfig.cs 中的 css 文件：
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/cosmos-bootstrap.css",
"~/Content/site.css"));
查看我的 _Layout.cshtml 以获取样式参考：
@Styles.Render("~/Content/css")
将 Bootstrap 升级到 v4 并尝试了 Cosmos v4，但仍然得到相同的结果。
这似乎只是导航栏的问题，因为其他 Cosmos 字体和按钮似乎显示正常。我还测试了其他一些 Bootstrap 主题，对于导航栏的结果相同。
任何帮助将不胜感激。
编辑：导航栏的 HTML 如下：
<body>
<div class="navbar navbar-inverse 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>
</button>
@Html.ActionLink("Portal", "Index", "Home", new area = "" , new @class = "navbar-brand" )
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - TEST IT SOLUTIONS</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
【问题讨论】：
【参考方案1】：Bootstrap 4 几乎完全重写了 Bootstrap 3，因此，两个版本完全彼此不兼容。
因此，为 Bootstrap 3 设计的 Bootstrap 主题必须手动迁移到 Bootstrap 4。因为这两个版本非常不同，所以没有简单或自动化的方法可以做到这一点。任何自动化迁移的尝试都会留下大量需要手动调整的内容。
附：如果您只想修复标题，请在您的问题中发布 complete code snippet（HTML 输出），即在此处发布您当前的代码。
编辑：
根据您现在发布的代码 sn-p，有一点很清楚：您的主题不是 Bootstrap 4 主题，并且与 Bootstrap 4 不兼容。您所拥有的是 Bootstrap 3 代码。
这是特定导航栏的 Bootstrap 4 代码的样子（您需要根据需要为 ASP.NET 代码调整它；单击下面的“运行代码 sn-p”按钮以查看它的实际效果）：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
<div class="container">
<a class="navbar-brand" href="#">BrandName</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End of navbar -->
<div style="padding:1000px 0;">hi</div>【讨论】：
谢谢。升级到 BS4 后，我使用了全新的 BS4 兼容主题，所以我认为这不是问题。将编辑我的帖子以显示 HTML。 不，那里的代码绝对不是 Bootstrap 4。它是 Bootstrap 3。谁把它作为“B4 兼容主题”出售，试图欺骗你。 刚刚使用导航栏的 Bootstrap 4 代码更新了我的答案。您需要根据需要针对 ASP.NET 进行调整，但我的代码 sn-p 为您提供了一个有效的 Bootstrap 4 导航栏，其属性/功能与您当前的 Bootstrap 3 导航栏相同。以上是关于在 ASP.NET MVC 显示问题中更改引导主题的主要内容，如果未能解决你的问题，请参考以下文章
ASP.NET Web 应用程序无法使用自定义引导程序正确显示内容