Bootstrap 4导航在ASP.NET结构化文件夹项目中失效问题咨询

这个问题我之前帮不少ASP.NET开发者排查过，核心大概率是路径引用的问题——当你的页面放在子文件夹里时，母版页里的导航链接、Bootstrap资源引用如果还是用的相对当前页面的路径，就会导致子页面加载时找不到资源或者跳转地址错误。下面给你一步步的解决方案：

1. 修正导航链接的路径 #

母版页里的普通HTML导航链接（比如<a>标签）如果写的是<a href="Home.aspx">首页</a>，当子文件夹里的页面加载时，浏览器会尝试在子文件夹下找Home.aspx，而不是站点根目录的文件。

解决方法有两种：

• 用ASP.NET特有的根路径标记~/，配合ResolveUrl方法解析：

  <a class="nav-link" href='<%= ResolveUrl("~/Home.aspx") %>'>首页</a>
  

• 改用ASP.NET服务器控件HyperLink，它会自动处理根路径：

  <asp:HyperLink ID="lnkHome" runat="server" CssClass="nav-link" NavigateUrl="~/Home.aspx">首页</asp:HyperLink>
  

2. 修复Bootstrap资源的引用路径 #

同样的，母版页里的Bootstrap CSS/JS引用如果是相对路径（比如<link href="css/bootstrap.min.css" rel="stylesheet">），子页面会从自身文件夹下去找css目录，自然找不到。

修正方式：

• 给引用标签加上runat="server"，让ASP.NET解析~/路径：

  <link href="~/css/bootstrap.min.css" rel="stylesheet" runat="server">
  <script src="~/js/bootstrap.min.js" runat="server"></script>
  

• 或者用ResolveUrl方法生成正确路径：

  <link href='<%= ResolveUrl("~/css/bootstrap.min.css") %>' rel="stylesheet">
  <script src='<%= ResolveUrl("~/js/bootstrap.min.js") %>'></script>
  

3. 验证路径是否正确 #

修改后可以打开子页面，右键查看页面源代码，检查导航链接和资源引用的实际路径：

• 正确的导航链接应该是/Home.aspx（站点根目录下的文件），而不是/SubFolder/Home.aspx
• Bootstrap资源路径应该是/css/bootstrap.min.css，而不是/SubFolder/css/bootstrap.min.css

如果还是有问题，可以确认你的站点根目录设置是否正确，以及文件夹结构里的资源文件是否确实在对应的位置。

内容的提问来源于stack exchange，提问作者Rosan karel