引導下拉菜單項在一些頁面上不可點擊

Question

我有一個引導下拉問題，在我的主頁上，當我單擊菜單時正確地下來，但它不允許我單擊菜單中的鏈接項目。

奇怪的部分是，它一直在工作，直到最近發生的一個靜態非相關頁面更改，不應該以任何可見的方式影響它。

看起來像引導網格系統以某種方式在下拉菜單不起作用的頁面上的下拉鍊接上方。

看看網站：https://eastcape.herokuapp.com/ 把它放在heroku上，這樣你們可以更好地看到它。主頁和論壇索引上的導航欄就是兩個不起作用的例子。

在任何特定的論壇帖子或新聞頁面都是它決定工作的例子。

順便說軌小白這裏：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; 
}