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")

然后构建项目检查更改，但导航栏与预期不符：

谢谢

【问题讨论】：

标签： jquery css asp.net twitter-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>&copy; @DateTime.Now.Year</p>
    </footer>
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>

【讨论】：