Bootstrap 4.2.1：子文件夹页面崩溃Navbar

Question

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

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

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

我调查了为什么会发生这种情况，并且看到HREF（如果最初指向＃，则现在显示为“ ../#”，Chrome发送以下消息：

  

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

其余所有代码都完全相同。

代码如下所示：

<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瘫痪了。

UPDATE-2

我进行了一次测试，将所有页面从子文件夹移动到主文件夹（客户端不接受的解决方案），所有功能都像超级按钮一样。该问题与Bootstrap 4.2.1 + ASP Materpages + SubFolder中的页面有关。

并且按照下面的建议，我尝试了HREF =＃尝试……完全没有成功。

UPDATE-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 ），否则还有其他部分或导致错误持续存在的错误。