ASP.NET-MVC5 - 为啥 Bootstrap v4 主题不能正确显示组件？
Posted
技术标签:
【中文标题】ASP.NET-MVC5 - 为啥 Bootstrap v4 主题不能正确显示组件？【英文标题】：ASP.NET-MVC5 - Why would Bootstrap v4 themes not show components correctly?ASP.NET-MVC5 - 为什么 Bootstrap v4 主题不能正确显示组件？ 【发布时间】：2018-06-29 08:45:44 【问题描述】：我有一个全新的 ASP.Net MVC5 应用程序。我想将默认主题更改为Minty 主题，即Bootstrap Version 4。但是，按照以下步骤操作后，主题变得混乱，无法正确显示导航栏等组件。 谁能指导我如何安装来自Bootswatch 的最新主题。
因为它是一个全新的 ASP.Net MVC 应用程序。我做了以下事情：
-
已安装 引导程序：
Install-Package bootstrap -
Version 4.0.0
已安装 jQuery：Install-Package jQuery -Version 3.2.1
已安装 Popper.js：Install-Package popper.js -Version 1.12.9
以上安装后。我做了以下步骤来尝试更改默认主题：
-
选择Minty主题并下载并复制
bootstrap.css样式
调用文件minty.bootstrap.css
将minty.bootstrap.css 添加到Content文件夹
更新了捆绑包以定位文件夹 App_Start -> BundleConfig.cs 中的新 Minty 主题
BundleConfig.cs 文件：
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/minty.bootstrap.css",
"~/Content/site.css"));
_Layout.cshtml 文件：
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
然后构建项目检查更改，但导航栏与预期不符：
谢谢
【问题讨论】：
【参考方案1】：是的，您必须删除布局页面中的导航 div 并将其放置
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
【讨论】：
解释一下会很方便，您能解释一下您的导航 div 有何不同以及问题所在吗？【参考方案2】：为了将来参考，我在导航栏上遇到了类似的问题，不得不更改布局页面以匹配下面的 Bootstrap 4.0 文档链接提供的信息：
https://getbootstrap.com/docs/4.0/components/navbar/
编辑：
此外，我必须将我所有的 @Html.ActionLink 替换为 <a class="nav-link" href="@Url.Action("Index", "Views")">Navbar Item</a> 以使其像升级 Bootstrap 之前那样工作
【讨论】：
【参考方案3】：navbar问题是由于Bootswatch(https://bootswatch.com/)现在已经更新到版本4，而MVC仍然使用Bootstrap版本3。所以你需要做的是去这个网站：https://bootswatch.com/3/并重做您执行的步骤。
对我有用~
【讨论】：
【参考方案4】：导航栏的问题是 MVC 默认仍然使用 Bootstrap 版本 3，当您将 nuget 包升级到 bootstrap 版本 4 时，代码被重写并更改为另一个类。 这里有一些小解释：Navbar - Migrating to V4 * Bootstrap
导航栏已在 flexbox 中完全重写，改进了对对齐、响应和自定义的支持。 响应式导航栏行为现在通过所需的 .navbar-expand-breakpoint 应用于 .navbar 类，您可以在其中选择折叠导航栏的位置。以前这是一个较少的变量修改，需要重新编译。 .navbar-default 现在是 .navbar-light，但 .navbar-dark 保持不变。
我将默认模板 _Layout.cshtml 修改为与 Bootstrap v4 中的 Navbar 一起使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
@Html.ActionLink("Application name", "Index", "Home", new area = "" , new @class = "navbar-brand" )
<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 mr-auto">
<li class="nav-item">@Html.ActionLink("Home", "Index", "Home", new @class = "nav-link active" )</li>
<li class="nav-item">@Html.ActionLink("About", "About", "Home", new @class = "nav-link" )</li>
<li class="nav-item">@Html.ActionLink("Contact", "Contact", "Home", new @class = "nav-link" )</li>
</ul>
</div>
</nav>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
【讨论】：
以上是关于ASP.NET-MVC5 - 为啥 Bootstrap v4 主题不能正确显示组件？的主要内容，如果未能解决你的问题，请参考以下文章
剑道 DropDownListFor() 与 ASP.NET-MVC