CSS 在 MVC 5.2 中无法正确呈现答案

【问题标题】：CSS Not Rendering Properly in MVC 5.2CSS 在 MVC 5.2 中无法正确呈现
【发布时间】：2020-01-16 07:00:36
【问题描述】：

我正在使用 MVC 5.2。我正在尝试从https://bootswatch.com/lumen/ 实现一些预先编写的 css。我已经下载了引导文件并将其重命名为 bootstrap-lumen.css。将其放入我的内容文件夹后，我更新了 BundleConfig 文件，如下所示： enter image description here

当我运行应用程序时，我得到一个如下所示的标题：

enter image description here

我在 chrome 开发工具中没有看到任何可以解释此问题的内容。

【问题讨论】：

标签： asp.net asp.net-mvc visual-studio bootstrap-4

【解决方案1】：

您在 BundleConfig 中编写 css 文件的顺序很重要。请尝试以下操作。

将 bootstrap-lumen.css 放在 site.css 下方

bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/site.css",
                      "~/Content/bootstrap-lumen.css"));

如果这不起作用，请尝试从列表中删除 site.css 并查看结果

bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap-lumen.css"));

【讨论】：

【解决方案2】：

您遇到的问题是您的 bootstrap-lumen.css 基于 bootstrap v 4.3.1。而您的布局中的 html 是为引导程序版本 3.4.1 设置的。因此，您需要查看引导程序 4 在其documentation 中的导航是如何完成的，并相应地更改 _layout.cshtml 中的 html。

此外，由于 Bootswatch 基于 bootstrap 4，您需要将 bootstrap.js 更新到当前为 v4.3.1 的最新版本，并在 bootstrap 包中包含 popper.js。

这是一个示例 _Layout.cshtml 文件，您可以使用它来开始

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>

    <div class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary">
        <div class="container">
            <a href="./" class="navbar-brand">My application</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav">                
                    <li class="nav-item">
                        @Html.ActionLink("Home", "Index", "Home", new { @class = "nav-link" })                       
                    </li>
                    <li class="nav-item">
                        @Html.ActionLink("About", "About", "Home", new { @class = "nav-link" })
                    </li>
                    <li>
                        @Html.ActionLink("Contact", "Contact", "Home", new { @class = "nav-link" })
                    </li>
                </ul>

            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>


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

【讨论】：