_Layout.cshtml跨页面Bootstrap CSS失效问题技术求助

我帮你排查了下你遇到的问题：站点统一布局在Index页面正常生效，但切换到其他页面时Bootstrap CSS丢失、布局失效，只有文本显示——核心原因是你用了相对路径引用静态资源，非根路径页面会解析错误。

问题根源 #

看你提供的_Layout.cshtml代码里，所有静态资源（CSS、JS、图片、图标）都是用相对路径引用的，比如：

<link href="css/bootstrap.css" rel="stylesheet" />
<img src="img/logo_kraan.jpg" alt="" class="logo" />

当你访问Home/Statuten这类非根路径页面时，浏览器会把相对路径解析成Home/css/bootstrap.css，但你的静态资源实际存放在站点根目录的css、img文件夹下，自然找不到资源，导致样式丢失。

解决方案：使用根路径前缀~/ #

ASP.NET Core支持用~/表示站点根目录，框架会自动把它解析成正确的绝对路径，你只需要把所有静态资源的引用路径加上~/前缀即可：

1. 修改CSS和图标引用

把<head>里的资源引用全部替换成带~/的路径：

<environment include="Development">
    <link href="https://fonts.googleapis.com/css?family=Noto+Serif:400,400italic,700|Open+Sans:300,400,600,700" rel="stylesheet">
    <link href="~/css/bootstrap.css" rel="stylesheet" />
    <link href="~/css/bootstrap-responsive.css" rel="stylesheet" />
    <link href="~/css/fancybox/jquery.fancybox.css" rel="stylesheet">
    <link href="~/css/jcarousel.css" rel="stylesheet" />
    <link href="~/css/flexslider.css" rel="stylesheet" />
    <link href="~/css/style.css" rel="stylesheet" />
    <!-- Theme skin -->
    <link href="~/skins/default.css" rel="stylesheet" />
    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="~/ico/apple-touch-icon-144-precomposed.png" />
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="~/ico/apple-touch-icon-114-precomposed.png" />
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="~/ico/apple-touch-icon-72-precomposed.png" />
    <link rel="apple-touch-icon-precomposed" href="~/ico/apple-touch-icon-57-precomposed.png" />
    <link rel="shortcut icon" href="~/ico/favicon.png" />
</environment>

2. 修改图片引用

把logo的图片路径也加上~/：

<a asp-area="" asp-controller="Home" asp-action="Index"><img src="~/img/logo_kraan.jpg" alt="" class="logo" /></a>

3. 修改JS资源引用

同样把<body>底部的JS引用替换成带~/的路径：

<environment include="Development">
    <script src="~/js/jquery.js"></script>
    <script src="~/js/jquery.easing.1.3.js"></script>
    <script src="~/js/bootstrap.js"></script>
    <script src="~/js/jcarousel/jquery.jcarousel.min.js"></script>
    <script src="~/js/jquery.fancybox.pack.js"></script>
    <script src="~/js/jquery.fancybox-media.js"></script>
    <script src="~/js/google-code-prettify/prettify.js"></script>
    <script src="~/js/portfolio/jquery.quicksand.js"></script>
    <script src="~/js/portfolio/setting.js"></script>
    <script src="~/js/jquery.flexslider.js"></script>
    <script src="~/js/jquery.nivo.slider.js"></script>
    <script src="~/js/modernizr.custom.js"></script>
    <script src="~/js/jquery.ba-cond.min.js"></script>
    <script src="~/js/jquery.slitslider.js"></script>
    <script src="~/js/animate.js"></script>
    <!-- Template Custom JavaScript File -->
    <script src="~/js/custom.js"></script>
</environment>

验证方法 #

修改完成后重启项目，切换到其他页面，打开浏览器开发者工具（按F12），切换到「网络」标签，刷新页面，查看所有CSS和JS文件的请求状态：如果都是200状态码，说明资源加载正常，样式也会生效了。

内容的提问来源于stack exchange，提问作者joachim soetinck