Bootstrap 5下拉菜单适用于父页面但不适用于子页面答案

【问题标题】：Bootstrap 5 dropdown menu working on parent but not on child pagesBootstrap 5下拉菜单适用于父页面但不适用于子页面
【发布时间】：2021-11-16 00:20:06
【问题描述】：

我是 Bootstrap 的新手。我正在尝试为我的网站实现一个下拉菜单，并使用Bootstrap documentation (5.1) 来提供一个工作示例。

目前下拉菜单按预期工作，但仅在主页中。这是我正在使用的代码：

<head>
...
...
    <link href="https://getbootstrap.com/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://getbootstrap.com/docs/5.1/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
...
...
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark" >
    <div class="container-fluid">
        <a href="{{.Site.BaseURL}}" class="navbar-brand">
            <img src="{{.Site.BaseURL}}{{ .Site.Params.site_logo }}" alt="" width="70%" height="auto"  class="d-inline-block align-text-top"></a>
            <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
                <div class="navbar-nav ms-auto">
                    <a href="{{.Site.BaseURL}}cursos" class="nav-item nav-link">Cursos</a>
                    <a href="{{.Site.BaseURL}}consultoria" class="nav-item nav-link">Consultoría</a>
                    <div class="nav-item dropdown">
                        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Recursos</a>
                        <div class="dropdown-menu">
                            <a href="{{.Site.BaseURL}}contacto" class="dropdown-item">Contacto</a>
                            <a href="{{.Site.BaseURL}}blog" class="dropdown-item">Blog</a>
                            <a href="{{.Site.BaseURL}}descargas" class="dropdown-item">Descargas</a>
                            <a href="{{.Site.BaseURL}}acerca-de" class="dropdown-item">Acerca de</a>
                        </div>
                    </div>
                    <a href="#" class="btn btn-outline-light" role="button">Suscribirse</a>
                </div>
            </div>
    </div>
</nav>

...
</body>

下拉菜单名为Recursos，在主页上它按预期工作，即单击下拉菜单时会出现菜单项：

但是，当我导航到子页面时，下拉菜单停止工作，当我单击它时没有任何反应。所以问题出在这里：

<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Recursos</a>

我注意到在主页中，当鼠标悬停在下拉菜单上时，链接指向homepage/#，它就像一个魅力。但是，对于子页面，链接会自动更新并指向相应子页面的 URL（例如 homepage/blog/# 或 homepage/about/#），然后它就会停止工作。

如何防止 Bootstrap 更新下拉菜单的链接？

我尝试在创建下拉组件 (href="") 时也将 href 字段留空，但问题仍然存在。

我也尝试了similar question 中提出的解决方案，但无济于事。

感谢任何帮助！

【问题讨论】：

标签： html bootstrap-5

【解决方案1】：

解决了！

我调用的是本地版本的bootstrap.bundle.min.js：

<script src="js/bootstrap.bundle.min.js"></script>

但忘记在路径的开头包含/，因此在渲染子页面时找不到.js文件。

一旦更正：

<script src="/js/bootstrap.bundle.min.js"></script>

一切都按预期进行！

【讨论】：