2016-09-20 52 views
0

我遇到問題,試圖讓Bootstrap 3頁腳導航在SharePoint 2013 Intranet網站上正確襯底。Bootstrap footer導航覆蓋PopUp Divs

這是我所看到的:http://screencast.com/t/vQFVCBbfE7P

在開發工具,我試圖向下移動的z-index爲0頁腳導航本身(這是一部分一部分的工作,即灰色背景不漂浮在彈出的div)

我有關CSS是

.footerTagline { 
 
    \t background: #001F5B; 
 
    \t color: white; 
 
    \t padding: 2px 0px; 
 
    } 
 
    
 
    #bs-footer-nav ul li ul li { 
 
    \t margin-left: -40px; 
 
    } 
 
    
 
    .BHIFooterInfo, .BHIFooterInfo div { 
 
    \t z-index:0; 
 
    \t position:inherit !important; 
 
    \t background: rgb(138,141,143); 
 
    } 
 
    
 
    .BHIFooterInfo, #companySites { 
 
    \t padding-top: 10px; 
 
    \t padding-bottom: 20px; 
 
    } 
 
    
 
    #bs-footer-nav li { 
 
    \t color: rgb(241, 180, 52); \t 
 
    \t padding-right: 35px; 
 
    } 
 
    
 
    #bs-footer-nav li ul li { 
 
    \t color: rgb(241, 180, 52); \t 
 
    \t padding-right: 0px; 
 
    } 
 
     
 
    #bs-footer-nav, #bs-footer-nav a { 
 
    \t background: rgb(138, 141, 143); 
 
    \t color: #fff; 
 
    } \t 
 
    
 
    .navbar { 
 
    \t margin-bottom: 0px; 
 
    } 
 
     
 
    .footerSocialImages { 
 
    \t width:23px; 
 
    \t height: 23px; 
 
    } 
 
    
 
    #bhiSocialLinks li, #bhiSocialLinks li a { 
 
    \t padding-left: 0px; 
 
    \t padding-right: 2px; 
 
    } 
 

 

 
\t \t \t \t \t \t \t 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="row"> 
 
\t <nav class="navbar navbar-default BHIFooterInfo"> 
 
\t \t <!-- Brand and toggle get grouped for better mobile display --> 
 
\t \t \t <div class="navbar-header"> 
 
\t \t \t \t \t <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-footer-nav" aria-expanded="false"> 
 
\t \t \t \t \t \t \t   <span class="sr-only">Toggle navigation</span> 
 
\t \t \t \t \t \t \t   <span class="icon-bar"></span> 
 
\t \t \t \t \t \t \t   <span class="icon-bar"></span> 
 
\t \t \t \t \t \t \t   <span class="icon-bar"></span> 
 
\t \t \t \t \t \t \t  </button> 
 
\t \t \t \t \t \t \t  <a class="navbar-brand" href="#">Footer Navigation</a> 
 
\t \t \t \t \t \t \t  </div> 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t  <!-- Collect the nav links, forms, and other content for toggling --> 
 
\t \t \t \t \t \t \t  <div class="collapse navbar-collapse nav-footer" id="bs-footer-nav"> 
 
<ul class="nav navbar-nav"> 
 
\t \t \t \t \t \t \t   <li>Company Information 
 
\t \t \t \t \t \t \t   \t <ul> 
 
\t \t \t \t \t \t \t   \t \t <li><a href="linkurl.com">Goals and Initiatives</a></li> 
 
\t \t \t \t \t \t \t   \t \t <li><a href="linkurl.com">BISSELL Locations</a></li> 
 
\t \t \t \t \t \t \t   \t \t <li><a href="linkurl.com">BISSELL Strategy</a></li> 
 
\t \t \t \t \t \t \t   \t \t <li><a href="linkurl.com">Corporate Calendar</a></li> 
 
\t \t \t \t \t \t \t   \t \t <li><a href="linkurl.com">Engagement Survey</a></li> 
 
\t \t \t \t \t \t \t   \t \t <li><a href="linkurl.com">Global Business Update</a></li> 
 
\t \t \t \t \t \t \t   \t \t <li><a href="linkurl.com">MTD Sales</a></li> 
 
\t \t \t \t \t \t \t   \t \t <li><a href="linkurl.com">Organizational Chart</a></li> 
 
\t \t \t \t \t \t \t   \t \t <li><a href="linkurl.com">Press Releases</a></li> 
 
\t \t \t \t \t \t \t   \t </ul> 
 
\t \t \t \t \t \t \t   </li> 
 
\t \t \t \t \t \t \t   <li>Global BISSELL Sites 
 
\t \t \t \t \t \t \t   \t <ul> 
 
\t \t \t \t \t \t \t \t   \t <li><a href="http://www.bissell.com.au" target="_blank">Australia</a></li> 
 
\t \t \t \t \t \t \t \t   \t <li><a href="http://canada.bissell.com" target="_blank">Canada</a></li> 
 
\t \t \t \t \t \t \t \t   \t <li><a href="http://www.bissell.cn" target="_blank">China</a></li> 
 
\t \t \t \t \t \t \t \t   \t <li><a href="http://www.bissell.cn" target="_blank">Hong Kong</a></li> 
 
\t \t \t \t \t \t \t \t   \t <li><a href="http://www.bissell.nl" target="_blank">Netherlands</a></li> 
 
\t \t \t \t \t \t \t \t   \t <li><a href="http://www.bisselldirect.co.uk" target="_blank">United Kingdom</a></li> 
 
\t \t \t \t \t \t \t \t   \t <li><a href="http://www.bissell.com" target="_blank">United States</a></li> 
 
\t \t \t \t \t \t \t   \t </ul> 
 
\t \t \t \t \t \t \t   </li> 
 
\t \t \t \t \t \t \t   <li>Quick Links 
 
\t \t \t \t \t \t \t   \t <ul> 
 
\t \t \t \t \t \t \t \t   \t <li><a href="linkurl.com">Associate Take Home Program</a></li> 
 
\t \t \t \t \t \t \t \t   \t <li><a href="linkurl.com">BISSELL Outlet Store</a></li> 
 
\t \t \t \t \t \t \t \t   \t <li><a href="linkurl.com" target="_blank">Idea Hopper</a></li> 
 
\t \t \t \t \t \t \t \t   \t <li><a href="linkurl.com" target="_blank">Guest Registration </a></li> 
 
\t \t \t \t \t \t \t \t   \t <li><a href="http://linkurl.com">Meeting Services</a></li> 
 
\t \t \t \t \t \t \t \t   \t <li><a href="http://linkurl.com/" target="_blank">Partner Site</a></li> 
 
\t \t \t \t \t \t \t \t   \t <li><a href="http://linkurl.com/" target="_blank">Supplier Site</a></li> 
 
\t \t \t \t \t \t \t   \t </ul> 
 
\t \t \t \t \t \t \t   </li> 
 
\t \t \t \t \t \t \t  </ul> 
 
\t \t \t \t \t \t \t  <ul class="nav navbar-nav navbar-right" id="bhiSocialLinks"> 
 
\t \t \t \t \t \t \t  \t <li><a href="https://www.facebook.com/bissell" target="_blank"><img src="/Style Library/Images/socialMedia Links/Facebook_white.png" class="footerSocialImages" alt="Facebook"></a></li> 
 
\t \t \t \t \t \t \t  \t <li><a href="https://www.instagram.com/bissellclean/" target="_blank"><img src="/Style Library/Images/socialMedia Links/Instagram_white.png" class="footerSocialImages" alt="Instagram"></a></li> 
 
\t \t \t \t \t \t \t  \t <li><a href="https://twitter.com/bissellclean" target="_blank"><img src="/Style Library/Images/socialMedia Links/Twitter_white.png" class="footerSocialImages" alt="Twitter"></a></li> 
 
\t \t \t \t \t \t \t  \t <li><a href="https://www.youtube.com/user/BISSELLClean" target="_blank"><img src="/Style Library/Images/socialMedia Links/YouTube_white.png" class="footerSocialImages" alt="YouTube"></a></li> 
 
\t \t \t \t \t \t \t  \t <li><a href="https://www.linkedin.com/company/bissell-homecare-inc-" target="_blank"><img src="/Style Library/Images/socialMedia Links/LinkedIn_white.png" class="footerSocialImages" alt="LinkedIn"></a></li> 
 
\t \t \t \t \t \t \t  \t <li><a href="https://www.glassdoor.com/Overview/Working-at-BISSELL-EI_IE5594.11,18.htm" target="_blank"><img src="/Style Library/Images/socialMedia Links/GlassDoor_white.png" class="footerSocialImages" alt="Glass Door"></a></li> 
 
\t \t \t \t \t \t \t  \t <li><a href="https://www.pinterest.com/bissellclean/" target="_blank"><img src="/Style Library/Images/socialMedia Links/Pinterest_white.png" class="footerSocialImages" alt="Pinterest"></a></li> 
 
\t \t \t \t \t \t \t  \t <li><a href="https://plus.google.com/+bissell" target="_blank"><img src="/Style Library/Images/socialMedia Links/Google+_white.png" class="footerSocialImages" alt="Google+"></a></li> 
 
\t \t \t \t \t \t \t  </ul> 
 
\t \t \t \t \t \t \t  </div><!-- /.navbar-collapse --> 
 
\t \t \t \t \t \t \t </nav> 
 
\t \t \t \t \t \t </div> 
 
        </div> 
 
       </div>

即使在z-index上使用!important:0一直到a標籤似乎都無濟於事。

此問題出現在所有瀏覽器中。

需要注意的事項在此有:

  • 的div似乎是由MS代碼在JavaScript生成的(對所有事業部彈出創作)
  • 它覆蓋在頁腳資產淨值是在UL什麼或李或

我意識到我缺少一些簡單的東西,但CSS不是我的強項。任何幫助都是虛心的讚賞。

感謝

+0

也許這是容器日期選擇器的特點,你應該專注於CSS明智? – Lee

+0

@我曾考慮過這個問題,但這會影響所有彈出的MS Div(例如搜索結果彈出窗口,橢圓菜單彈出窗口等等)。所以,我希望修復頁腳作爲根本問題,而不是嘗試重新格式化所有Sharepoint div菜單/顯示選項 – RWHertenstein2

+0

增加日曆的z-index並嘗試。 –

回答

0

添加以下代碼,或給我的託管URL檢查

nav-footer { 
    z-index:100 !important; 
} 
+0

請解釋你的代碼,以及你正在做什麼不同來糾正這個問題? – Lee

0

現在我覺得自己像個白癡。這是結束了修復它:

.nav-footer ul li { 
    position: inherit; 
} 

雖然這本身並沒有幫助,將其轉換爲:

.nav-footer ul li { 
    position: static; 
} 

當這一切級聯出來。

編輯的清晰度

包含div有一個位置:繼承就可以了。我不確定Bootstrap是否有位置:相對於他們的導航項目。當我再次玩Z指數時,正如建議中所指出的那樣,這些指標沒有任何區別,甚至將它們設置爲負值(隱藏所有鏈接除外)。當我不小心點擊了位置:繼承時,鏈接被置於彈出窗口的下方。

因此,我將相同的邏輯添加到頁腳div上的列表項中。一旦我測試出來,它就結束了工作。我查看了計算的CSS,結果證明它繼承了靜態值(我不知道爲什麼需要明確說明)。每w3Schools,靜態

默認值。元素渲染順序,因爲它們出現在文檔中流動

http://www.w3schools.com/cssref/pr_class_position.asp

所以我猜測它只是重置一切都在頁腳中顯示,因爲它出現在代碼。所以,正如我所想的那樣,Z指數最終不會成爲問題。