Bootstrap無法看到內容的摺疊菜單原因

所以我沒有與實際的菜單打開問題，我只是有一個問題，而菜單中的數據無法看到，因爲它的內容，妨礙視圖 - 我會認爲摺疊的下拉菜單將放在現有的內容上。Bootstrap無法看到內容的摺疊菜單原因

這是我的當前設置將與被總結出的jsfiddle後：

<div id="header" style="height: 200px; background-image: url({{ header_image }})" class="background-image"> 
    <nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-partition" aria-expanded="false"> 
      <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#!/home">{{ site_logo_name }}</a> 
     </div> 

     <div class="collapse navbar-collapse" id="collapse-partition"> 
     <ul class="nav navbar-nav"> 
      <!--bootstrap standard link and dropdown--> 
     </ul> 
     </div> 
    </div> 
    </nav> 
</div>

jsfiddle - 我也不太清楚爲什麼有與下拉工作的問題，並自動調整大小時合攏下降，但這是我的代碼。

這是問題的一個GIF我的服務器上gyazo gif

來源

2017-01-26 Jek

你更可能已經放置在導航欄下方，因爲你的導航欄被包裹在另一個元素，這可能會導致問題的元素，但它是很難告訴你不要看完整的代碼。

#header{ 
    position:relative; 
    z-index:1; 
}

如果的z-index：這可以通過添加類的navbar-static-top到導覽列或添加位置到您#header並且這給出了更高的z-index比你的標題下的元件，像這樣被固定1不夠高嘗試更高的數字，直到它的工作。

這裏是工作提琴Working Fiddle Demo

附：你的小提琴不能正常工作，因爲你忘記加載jquery之前引導的js

來源

2017-01-26 05:05:49

**你的小提琴不能正常工作，因爲你忘記加載jquery之前引導的js ** Appologies，這工作完美，謝謝先生。 :-) – Jek

Bootstrap無法看到內容的摺疊菜單原因

回答

相關問題