Question

我有一个引导下拉问题，当我点击菜单时，当我正确地关闭菜单但是它不允许我点击菜单中的链接项目。

奇怪的是，它一直在工作，直到最近更改为静态的非相关页面，不会以任何可见的方式影响它。

看起来像引导网格系统不知何故位于下拉菜单不起作用的页面上的下拉链接上方。

要查看该网站：https://eastcape.herokuapp.com/ 把它放在heroku上让你们可以更好地看到它。主页和论坛索引上的导航栏是两个不起作用的示例。

在任何特定的论坛帖子或新闻页面上都是它决定工作的例子。

顺便说一下rails noob：P

我认为相关的代码是：

标题布局：

<header class="col-xs-12 col-sm-12 col-md-12 header">
  <div class="headernav">
    <% # img / nav bar/ weather icon, here %>
    <nav>
      <ul class="nav nav-tabs" id="navlist">
        <li><%= link_to "Home", root_path %></li>
        <li><%= link_to "News", news_path %></li>
        <li><%= link_to "Forum", forums_path %></li>
        <li><%= link_to "About", about_path %></li>
        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" %>Activities<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><%= link_to "Fishing", fishing_path %></li>
            <li></li>
          </ul>
        </li>
      </ul>
    </nav>
    <div class="col-xs-12 div-tp"></div>
  </div>
  <%= image_tag(('water4.jpg'), class: "header_image") %>
</header>

css :(需要滚动一点）

/* Header */
.header {
    height: 15%;
    z-index: 0;
}

.header_image {
    position: absolute;
    top: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
}

.headernav {
    position: absolute;
    float: right;
    bottom: 0%;
    right: 0%;
}

.nav > li > a {
    font-size: 125%;
      color: #ff6600; 
      text-shadow: .06em .06em #660000;
      z-index: 2;
}

.nav > li > a:hover {
    background-color: #ffeecc;
    color: red;
    z-index: 2;
    border-radius: 3em;
}

.div-tp {
    position: absolute;
    background-color: #e6e6e6;
    height: 100%;
    opacity: 0.5;
    z-index: 1;
    border-radius: 3em;
    bottom: 0%;
    right: 0%;
}

Answer 1

标题部分是 z-index 问题。只需制作标题z-index: 1;即可。它会正常工作。

<强> CSS：

.header {
    height: 15%;
    z-index: 1;
}

某些页面上无法单击的Bootstrap下拉菜单项

1 个答案: