Bootstrap模板跨页面下拉菜单失效及导航栏样式异常求助

下载的Bootstrap模板首页运行正常，但切换到其他页面后出现两个问题：

• 下拉菜单点击完全无响应
• 导航栏整体尺寸、按钮间距出现变化

本人是后端开发人员，对前端技术了解有限，无法定位问题原因，以下是相关模板代码及CSS代码：

模板HTML代码 #

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container px-4 px-lg-5">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span
                class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-4">
                <li class="nav-item"><a class="nav-link active" aria-current="page" href="/">Главная</a></li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button"
                        data-bs-toggle="dropdown" aria-expanded="false">Покупки</a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="#!">Bce товары</a></li>
                        <li>
                            <hr class="dropdown-divider" />
                        </li>
                        <li><a class="dropdown-item" href="#!">Категория 1</a></li>
                        <li><a class="dropdown-item" href="#!">Категория 2</a></li>
                        <li><a class="dropdown-item" href="#!">Категория 3</a></li>
                        <li><a class="dropdown-item" href="#!">Категория 4</a></li>
                    </ul>
                </li>
            </ul>
            <form class="d-flex">
                <button class="btn btn-outline-dark" type="submit">
                    <i class="bi-cart-fill me-1"></i>
                    Корзина
                    <span class="badge bg-dark text-white ms-1 rounded-pill">0</span>
                </button>
            </form>
            <ul class="navbar-nav ">
                <li class="nav-item"><a class="nav-link active" aria-current="page" href="/users/login">Войти</a></li>
                <li class="nav-item"><a class="nav-link active" aria-current="page" href="/users">Регистрация</a></li>
            </ul>
        </div>
    </div>
</nav>

自定义CSS代码 #

.nav-link {
    display: block;
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    font-size: var(--bs-nav-link-font-size);
    font-weight: var(--bs-nav-link-font-weight);
    color: var(--bs-nav-link-color);
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
.li {
    display: list-item;
    text-align: -webkit-match-parent;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

一、修复下拉菜单无响应问题 #

Bootstrap的下拉组件必须依赖其官方JavaScript文件才能工作，首页正常但其他页面失效，核心原因是非首页未正确引入Bootstrap JS：

• 检查所有非首页的HTML文件，在<body>标签末尾添加Bootstrap 5的JS文件引入（你的代码用了data-bs-toggle，属于Bootstrap 5的属性）：

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  

• 如果使用本地文件，注意相对路径是否正确：比如首页在根目录，其他页面在子文件夹，JS路径要写成../path/to/bootstrap.bundle.min.js，避免因路径错误导致加载失败。

二、修复导航栏样式变形问题 #

1. 修复CSS语法错误：你提供的CSS代码里.nav-link的大括号未闭合，这会导致后续所有CSS规则失效，是样式错乱的核心原因之一。修复后的代码：

   .nav-link {
       display: block;
       padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
       font-size: var(--bs-nav-link-font-size);
       font-weight: var(--bs-nav-link-font-weight);
       color: var(--bs-nav-link-color);
       text-decoration: none;
       transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
   } /* 补上缺失的闭合大括号 */
   .li {
       display: list-item;
       text-align: -webkit-match-parent;
   }
   *,
   *::before,
   *::after {
     box-sizing: border-box;
   }
   

2. 确认Bootstrap CSS全局引入：所有页面都要确保引入了Bootstrap核心CSS文件，且路径正确：

   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
   

3. 检查容器类依赖：导航栏使用了container px-4 px-lg-5这类Bootstrap内置类，如果Bootstrap CSS未加载，这些间距类会失效，导致导航栏尺寸错乱。

额外排查技巧 #

• 按F12打开浏览器控制台，查看「控制台」标签是否有JS报错，「网络」标签是否有CSS/JS文件加载失败的记录，这能快速定位问题。
• 确保所有页面使用的Bootstrap版本一致，不要混合Bootstrap 4和Bootstrap 5的文件，避免兼容性问题。

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