Bootstrap kann nicht zusammengebrochenes Menü Ursache des Inhalts

Question

So habe ich kein Problem mit der tatsächlichen Menüöffnung, ich habe nur ein Problem, während die Daten im Menü nicht gesehen werden können, da es Inhalt darüber ist, behindern die Ansicht - ich hätte gedacht, dass das minimierte Dropdown-Menü über den vorhandenen Inhalt gelegt würde.

Dies ist meine aktuelle Setup, die mit einem jsfiddle nach aufsummiert werden:

<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 - ich bin mir nicht sicher, warum es Probleme mit dem Drop-Down-Arbeiten und wenn der Zusammenbruch automatisch Ändern der Größe fällt, aber das ist mein Code.

Dies ist ein gif der Ausgabe auf meinem Servergyazo gif

Answer 1

Sie mehr als wahrscheinlich, um die Elemente unterhalb der Navigationsleiste positioniert haben und da Ihr navbar in einem anderen Element gewickelt ist, diese Probleme verursacht werden könnte, aber es ist schwer, um es zu sagen, ohne auf deinen vollständigen Code zu schauen. Dies kann wie so entweder durch Hinzufügen der Klasse von navbar-static-top zu Ihrem navbar oder das Hinzufügen einer Position zu Ihrem #header und gibt diesen einen höheren Z-Index als die Elemente unterhalb der Kopfzeile festgelegt werden:

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

wenn ein z-index von 1 ist nicht hoch genug versuche eine höhere Zahl, bis es funktioniert.

Hier ist eine Arbeits Geige Working Fiddle Demo

P. S. Deine Geige funktioniert nicht richtig, weil du vergessen hast, jquery vor dem Bootstrap zu laden js