引導3摺疊菜單顯示在渲染後的身體

我正在構建我的第一個BootManrap 3網站，以MetroMan Bootstrap模板開始，並遵循Pluralsight教程。我遇到了一個具體的行爲，其中的菜單正在顯示其他元素在體內顯示。隨着網站寬度降低到超出iPad的水平，導航按預期成爲下拉菜單，但該菜單顯示在（at）RenderBody（）後面。隨着寬度的減小，此行爲不會發生在網站中的任何其他位置。引導3摺疊菜單顯示在渲染後的身體

這裏是_Layout.cshtml

的相關部分

<header> 
<div class="container"> 
    <div class="row"> 
    <div class="col-md-3 col-sm-4"> 
     <!-- Logo starts --> 
     <div class="logo"> 
     <a href="~/Home/index"><img src="../Content/Templates/img/DJGLogo250.png" alt="Author Logo" class="navbar-brand" /></a> 
     <div class="clearfix"></div> 
     </div> 
     <!-- Logo ends --> 
    </div> 
    <div class="col-md-9 col-sm-8"> 
     <!-- Navbar starts --> 
     <div class="navi pull-right"> 
     <div id="ddtopmenubar" class="mattblackmenu"> 
      <!-- Main navigation --> 
      <!-- Use the background color class in anchor tag for colorful menu --> 
      <ul> 
      <li><a href="~/Home/Index" class="blightblue"> <i class="icon-home"></i> Home</a></li> 
      <!-- Main navigation --> 
      <li> 
       <a href="#" rel="ddsubmenu2" class="bred"> <i class="icon-book"></i> Author</a> 
       <!-- Sub Navigation --> 
       <ul id="ddsubmenu2" class="ddsubmenustyle"> 
       <li><a href="~/Home/About">About Damon</a></li> 
       <li><a href="~/Home/AskTheAuthor">Ask Damon</a></li> 
       <li><a href="~/Home/Speaking">Speaking Engagements</a></li> 
       <li><a href="~/Home/Books">Books</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="#" rel="ddsubmenu2" class="bviolet"> <i class="icon-comments"></i> Interact</a> 
       <!-- Sub Navigation --> 
       <ul id="ddsubmenu2" class="ddsubmenustyle"> 
       <li><a href="~/News/News">News</a></li> 
       <li><a href="~/Blog/Blog?curpos=0">Long-View Living (Blog)</a></li> 
       <li><a href="~/BookEngagement/BookEngagement">Book an Engagement</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="#" rel="ddsubmenu2" class="bgreen"> <i class="icon-bookmark"></i> Extras</a> 
       <!-- Sub navigation --> 
       <ul id="ddsubmenu2" class="ddsubmenustyle"> 
       <li><a href="~/RecommendedReading/RecommendedReading">Recommended Reading</a></li> 
       <li><a href="~/Home/StudyTips">Bible Study Tips</a></li> 
       </ul> 
      </li> 
      <li><a href="~/Contact/Contact" class="bblue"> <i class="icon-envelope-alt"></i> Contact</a></li> 
      </ul> 
     </div> 
     </div> 
     <div class="navis"></div> 
     <div class="clearfix"></div> 
    </div> 
    </div> 
</div> 
</header> 

<div class="clearfix"></div> 

<!-- Header ends --> 


    @RenderBody()

如果你看看左邊，正上方的藍色天空，白色的那個條子菜單。通過在驅動這兩個元素的CSS樣式上設置z-index值，我能夠讓菜單顯示在renderbody之上。這是一個醜陋的黑客，但它確實工作。

以下是代碼style.css的兩部分。

.navis select{ 
    display:none; 
    z-index:300; 
} 

/* Parallax Slider */ 

.da-slider{ 
    margin-bottom: 0px; 
    border-top: 3px solid #eee; 
    border-bottom: 3px solid #eee; 
    z-index:-1; 
}

必須有簡單的東西，我很想念 - 這將使這兩個元素來顯示一個接一個，而不是另一個之上。有什麼建議嗎？

來源

2017-04-15 DJGray

嘗試在'navi'元素中添加一個'z-index'，應該這樣做。 –

謝謝丹尼爾。這就是我在頂部獲得菜單的原因，但我真的很喜歡菜單顯示在呈現的主體上方而不是頂部。這當然比後面更好，但我怎樣才能讓元素分離？ – DJGray

請添加z-index：-1;爲滑塊添加z-index：9999;對於菜單

.da-slider{z-index:-1;} 


.navis{z-index:9999;}

來源

2017-04-19 03:56:58

引導3摺疊菜單顯示在渲染後的身體

回答

相關問題