Bootstrap导航栏仅首页生效非首页无法跳转求解决方案

AI 小北

2026-9-26

故障原因

你导航栏所有链接使用的是相对路径，路径的计算基准会跟随当前打开页面的目录层级动态变化，只有首页的路径刚好匹配目标文件位置，其他层级页面打开时，拼接出的路径会指向不存在的文件，因此跳转失败。

修复方案

优先使用站点根路径：所有导航链接的href属性值以/开头，路径从站点根目录开始计算，无需考虑当前页面所在层级，示例如下：

<!-- 假设index.html放在站点根目录 -->
<a class="nav-link" href="/index.html">Ahmmm Ahmmm</a>
<!-- 假设目标页面路径是根目录下的Bootstrap Website/Wish/Wish/下对应文件 -->
<a class="nav-link active" aria-current="page" href="/Bootstrap Website/Wish/Wish/surprise.html">Surprise</a>
<a class="nav-link" href="/Bootstrap Website/Wish/Wish/prayers.html">Prayers</a>
<a class="nav-link" href="/Bootstrap Website/Wish/Wish/gift.html">Gift</a>

本地调试时可以用VSCode的Live Server等本地服务器工具打开页面，即可正常识别根路径，无需上传到线上服务器。

若只能本地直接打开HTML文件，无法使用本地服务器，需要根据每个页面所在的目录层级，单独调整对应页面导航栏的相对路径：比如二级目录页面跳转到根目录首页写../index.html，三级目录页面跳首页写../../index.html。
额外注意：你当前代码里Surprise、Prayers、Gift三个导航项指向了同一个地址，需要修改为各自对应页面的实际路径；Bootstrap 5的交互功能（下拉菜单、折叠导航）需要配套引入JS文件，你目前只引入了CSS，可将Bootstrap JS文件下载到本地后，在</body>标签前引入即可正常使用下拉等交互功能。