时间戳

首页 > 解决方案 > CSS 在 MVC 5.2 中无法正确呈现

asp.net - CSS 在 MVC 5.2 中无法正确呈现

问题描述

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

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

在此处输入图像描述

我在 chrome 开发工具中没有看到任何可以解释这个问题的东西。

标签： asp.netasp.net-mvcvisual-studiobootstrap-4

解决方案

您遇到的问题是您的 bootstrap-lumen.css 基于 bootstrap v 4.3.1。而您布局中的 html 是为引导程序版本 3.4.1 设置的。因此，您需要查看其文档中的引导程序 4 中的导航是如何完成的，并相应地更改 _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>

推荐阅读