无法点击导航栏上的链接 [英] Unable to click on the links on a navbar

查看：21
本文介绍了无法点击导航栏上的链接的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我可以单击页面中的所有其他链接，包括在 list-group 中(如果有)，并访问我项目中的所有路径(当我使用映射的 url 直接访问它们时)在我的应用程序中)，但现在导航栏中的任何链接都无法访问.

代码下方:

 .navbar {z-索引:-1；}.list-group {边距顶部:-128px；宽度:180px；}li.list-group-item {填充:0；}.media img {填充:0；}.bd-placeholder-img {填充:0；}

 <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark"><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle导航"><span class="navbar-toggler-icon"></span><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><ul class="navbar-nav ml-auto"><li class="nav-item"><a class="nav-link" href="/login">登录</a><li class="nav-item"><a class="nav-link" href="/usuario/register">Cadastro</a>

</nav><main role="main" class="container-fluid"><div class="starter-template"><div class="row"><div class="col-2"><div class="list-group"><li class="list-group-item" href="/"><a href="/"><div class="media"><svg class="bd-placeholder-img" width="180px" height="360px" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false"role="img" aria-label="占位符:64x64"><title>占位符</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">...</text></svg>

</a>

<div class="col-10"><div>

</main>

我很确定问题出在我的 z-index 设置上，因为当我添加它时问题就开始了.我需要这个来将导航栏保持在 list-group 后面，但不会使导航栏中的链接不可用.

解决方案

In 是因为保持 z-index=-1，因为如果它比其他元素堆叠得更低.删除它或使其大于或等于零.

I can click all other links in the page, including in the list-group (when I have any), and access all paths from my project (when I directly access them using the url mapped in my application), but none of the links in the navbar are acessible right now.

Below the code:

    .navbar {
      z-index: -1;
    }
    
    .list-group {
      margin-top: -128px;
      width: 180px;
    }
    
    li.list-group-item {
      padding: 0;
    }
    
    .media img {
      padding: 0;
    }
    
    .bd-placeholder-img {
      padding: 0;
    }

    <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-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="navbarNav">
        <ul class="navbar-nav">
          
        </ul>
    
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="/login">Login</a>
          </li>
    
          <li class="nav-item">
            <a class="nav-link" href="/usuario/register">Cadastro</a>
          </li>
        </ul>
      </div>
    </nav>
    
    <main role="main" class="container-fluid">
    
      <div class="starter-template">
        <div class="row">
          <div class="col-2">
            
    <div class="list-group">
      <li class="list-group-item" href="/">
        <a href="/">
          <div class="media">
            
            <svg class="bd-placeholder-img" width="180px" height="360px" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64">
              <title>Placeholder</title>
              <rect width="100%" height="100%" fill="#868e96"></rect>
              <text x="50%" y="50%" fill="#dee2e6" dy=".3em">...</text>
            </svg>
          </div>
        </a>
      </li>
    </div>
    
          </div>
          <div class="col-10">
            <div>
            </div>
          </div>
        </div>
      </div>
    
    </main>

I am pretty sure the problem is with my z-index settings, because the issue start when I add that. I need this to keep the navbar behind the list-group, but without make the links in the navbar unavailable.

解决方案

In is because have kept z-index=-1, because if that it is getting stacked lower compared to other element. Either remove it or make it greater than or equal to zero.

这篇关于无法点击导航栏上的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆