2013-04-23 47 views
0

我有我的twitter引導下拉菜單獲取隱藏下面的項目和透明度的麻煩。例如:http://pictorious-web-qa.herokuapp.comtwitter bootstrap下拉z-index和透明度的可見性問題

enter image description here

  1. 菜單的z-index去下面的資料照片時,屏幕 縮小到寬400像素左右。我檢查了媒體查詢,但 找不到任何z-index設置。

    有關 示例,請參見http://pictorious-web-qa.herokuapp.com/profiles/albert

  2. 我想保持半透明的菜單導航,但想起來下拉菜單項的 固體透明度。我已經直接在菜單容器上設置了不透明度 ,但這似乎沒有改變任何東西。

  3. 如果縮小屏幕寬度下來 到導航欄菜單重疊的視頻菜單也與http://www.pictorious.com家 頁面上VIMEO視頻z-index的問題。我也試着 的z-index的設置也沒有用,不知道如何設置的wmode在 的VIMEO默認iframe嵌入技術

這是一個標準的Twitter的引導導航:

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 
     <a class="brand" href="/">Pictorious!</a> 
     <div class="btn-group pull-right" id="nav-login"> 
      <a class="btn" href="/login">Sign-In</a> 
     </div> 
     <div class="nav-collapse"> 
     <ul class="nav"> 
      <li class="active"><a href="/">Home</a></li> 
      <li><a href="/challenges">Challenges</a></li> 
        <li><a href="/about">About</a></li> 

         <form class="navbar-search pull-left form-search" action="/search"> 
          <input type="text" class="search-query span2" placeholder="Search" name="keyword"> 
         </form> 
        </li> 
     </ul> 
     </div><!--/.nav-collapse --> 
    </div> 
    </div> 

似乎在重疊照片上改變的唯一的事情是較小媒體查詢的邊距和填充。

+0

代碼在哪裏?截圖在哪裏?請不要要求爲您調試網站。 – Pavlo 2013-04-23 19:21:12

+0

添加了代碼段,並添加了屏幕截圖 – MonkeyBonkey 2013-04-23 20:22:08

回答

0

即使你找不到z-index設置,你也可以通過在你的CSS中編寫另一個類或者同名的ID來重寫它們 - 只需要在那裏創建另一個z-index即可。嘗試設置頂部元素的Z-index,並將底部元素的Z-index設置得更高。

+0

我試過調整z-index設置,但它似乎沒有區別.. – MonkeyBonkey 2013-04-23 22:40:19

+0

我有一個類似的問題,原來由父母上的「overflow:hidden」引起DIV。這個解決方案對我來說很簡單,因爲在審查之後,我確定我不需要溢出:隱藏了,所以我將它刪除了。這解決了這個問題。 – 2013-05-21 13:46:40

3

所以答案是我需要在默認引導程序輪播中設置相對位置,這就是爲什麼它不受我的z-index屬性影響的原因。

position: relative; z-index:-1; 
+0

感謝一噸,沒有選擇給1000 upvotes或否則我可以做到這一點:) – saikiran 2015-12-08 02:40:18