Bootstrap 4.2.1：子文件夹页面崩溃导航栏

Question

我有一个使用 Masterpages 的 ASP.NET 网站，并且正在从特定的子文件夹加载一些页面。 使用 Bootstrap 4.0 一切正常。

但是现在，使用 Bootstrap 4.2.1，当我跳转到这些页面之一时，包含使用 class="nav-link dropdown-toogle" 的子菜单的 NavBar 选项被破坏。

当我将鼠标放在下拉菜单上时，下方没有出现任何选项（相关菜单未加载/显示）。

我调查了它发生的原因，我看到 HREF（如果最初指向 #）现在显示“../#”，Chrome 发送以下消息：

未捕获的 DOMException：无法执行“querySelector” “文档”：“../#”不是有效的选择器。

剩下的代码都是一样的。

代码如下：

<li Class="nav-item dropdown">
    <a runat="server" Class="nav-link dropdown-toggle" href="#" id="AdmFuncs" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Arquivos</a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown" >
        <a class="dropdown-item" href="/AdminActions/Categorias.aspx">Categorias</a>
        <a class="dropdown-item" href="/AdminActions/Fabricantes.aspx">Fabricantes</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="/AdminActions/Recepcao.aspx">E-mail Receptor</a>
    </div>
</li>

当我转到子文件夹页面时，代码如下所示：

<li Class="nav-item dropdown">
    <a runat="server" Class="nav-link dropdown-toggle" href="../#" 

HREF 中 ../# 上方的注意事项

有趣的是：

1. 未使用任何下拉选项的命令选项具有 HREF="../" 但 Bootstrap 正常理解它们。
2. 具有下拉选项的命令选项（如上），具有 HREF="../#"（而只是 "#"）并且 Bootstrap 向 DOM 发送错误并且不打开相关菜单。

有什么技巧可以解决吗？ 我提前感谢。

更新

与支持人员交谈，他们建议使用data-target=#，甚至将ID 放入dropdown-toogle 类控件并使用data-target 引用它。

根本没有成功。 看到 DOM，我可以看到，当内容页面被加载（并且它位于子文件夹中）时，HREF 发生变化并且似乎使 Bootstrap 瘫痪......

更新-2

我做了一个测试，将所有页面从子文件夹移动到主文件夹（客户不接受的解决方案），一切都像一个魅力。该问题与 Bootstrap 4.2.1 + ASP Materpages + 子文件夹中的页面有关。

按照下面的建议，我将 HREF=# 取下来尝试...完全没有成功。

更新-3

Siava 建议删除 runat=server 并更改一些链接，以确保他在那里模拟问题作为解决方案。但是，不幸的是，我得到了以下结果：

您可以在上面看到 HREF 的问题已经消失，但问题仍然存在。

如果我们分析 Chrome 的错误，我们会看到：

如果您遇到并解决了这个问题，我将不胜感激。

拥抱！

Answer 1

甚至可能是一个功能:)

尝试从下拉锚点中删除服务器端处理，因为使用它似乎会导致解析器认为“#”是 MasterPage 级别的资源，因此在它前面加上 ../ 以提升一个级别。

<a class="nav-link dropdown-toggle" href="#" id="AdmFuncs" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Arquivos</a>

这会起作用，因为目前您似乎没有对该标签进行任何服务器端处理。如果将来发生这种情况，您可以改用NavigateUrl="#"：

<a runat="server" Class="nav-link dropdown-toggle" NavigateUrl="#" id="AdmFuncs" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Arquivos</a>

希望这会有所帮助！

---

更新：

刚刚能够重现您的问题（母版页中的下拉菜单、子文件夹中的浏览页面、Bootstrap 4.2.1）并已通过以下方式修复它：

<li Class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="AdmFuncs" role="button" data-toggle="dropdown" data-target="AdmFuncsDropDown" aria-haspopup="true" aria-expanded="false">Arquivos</a>
    <div class="dropdown-menu" id="AdmFuncsDropDown" aria-labelledby="navbarDropdown" >
        <a class="dropdown-item" href="/AdminActions/Categorias.aspx">Categorias</a>
        <a class="dropdown-item" href="/AdminActions/Fabricantes.aspx">Fabricantes</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="/AdminActions/Recepcao.aspx">E-mail Receptor</a>
    </div>
</li>

如果这不起作用，请尝试清除缓存（Ctrl + Shift + R），否则还有其他部分或导致错误持续存在的错误。