So platzieren Sie ein div, geöffnet von Bootstrap Navbar

Question

Ich habe eine bootstrap Sticky Navbar, die eine Schaltfläche enthält, die ein Drop-Down-Div öffnet, das eine Liste der anklickbaren Links enthält.

meine Bootply (ähnlich jsfidlle): http://www.bootply.com/T69XCh0Vei

CSS, würde Ich mag, dass auf Position direkt unter der navbar, in jeder angemessenen Bildschirmbreite, einschließlich mobilen div.

Das Einstellen der Position des Divs als 'relativ' hilft mir nicht, da es in der Navbar enthalten ist, was dazu führt, dass die Höhe der Navbar außerhalb des Maßstabs liegt.

Codebeispiel:

<nav class="navbar navbar-default navbar-fixed-top" id="sticky-nav-bar"> 
    <div class="container-fluid row"> 
     <div class="dropdown"> 
      <button class="btn dropdown-toggle col-md-1" id="dropdownMenu1" data-toggle="dropdown"> 
      <span class="glyphicon glyphicon-menu-hamburger"></span> 
      <span>NAVIGATE</span>  
      </button> 

      <div id="navbar-titles-id" class="hidden-xs"> 
       <div class="col-md-2 col-sm-1"> 
        <h5>Status</h5> 
       </div> 
       <div class="col-md-2 col-sm-1"> 
        <h5>Code</h5> 
       </div> 
      </div> 

      <div class="visible-xs" id="navbar-xs-id"> 
       <div class="result-title"> 
        <h2>Status Code</h2> 
       </div> 
      </div> 

      <ul class="dropdown-menu" id="dropdown-menu-nav-id"> 
      <li><input role="link" type="button" class="btn li-max-width" onclick="scrollToElement('#anchor0')" value="LINK 0"></li> 
      <li><input role="link" type="button" class="btn li-max-width" onclick="scrollToElement('#anchor1')" value="LINK 1"></li> 
      <li><input role="link" type="button" class="btn li-max-width" onclick="scrollToElement('#anchor2')" value="LINK 2"></li> 
      <li><input role="link" type="button" class="btn li-max-width" onclick="scrollToElement('#anchor3')" value="LINK 3"></li> 
      </ul> 

     </div> 
    </div> 
</nav> 

Answer 1

Sie können das gewünschte Ergebnis mit minimalen Veränderungen erzielen. Fügen Sie einfach eine benutzerdefinierte Klasse, zB: dropdown-pos, zu <div class="dropdown"> hinzu und geben Sie den Stil position: static an.

Das Problem ist der position: relative Stil, den Standard auf dropdown Klasse angewandt wird. Was das Drop-Menü dazu bringt, an der Unterseite von sein Elternelement zu haften.

prüfen Working Demo Here

HTML:

<nav class="navbar navbar-default navbar-fixed-top" id="sticky-nav-bar"> 
    <div class="container-fluid row"> 
    <div class="dropdown dropdown-pos"> 
     <button class="btn dropdown-toggle col-md-1" id="dropdownMenu1" data-toggle="dropdown"> 
       <span class="glyphicon glyphicon-menu-hamburger"></span> 
       <span>NAVIGATE</span>  
       </button> 

     <div id="navbar-titles-id" class="hidden-xs"> 
     <div class="col-md-2 col-sm-1"> 
      <h5>Status</h5> 
     </div> 
     <div class="col-md-2 col-sm-1"> 
      <h5>Code</h5> 
     </div> 
     </div> 

     <div class="visible-xs" id="navbar-xs-id"> 
     <div class="result-title"> 
      <h2>Status Code</h2> 
     </div> 
     </div> 

     <ul class="dropdown-menu" id="dropdown-menu-nav-id"> 
     <li><input role="link" class="btn li-max-width" onclick="scrollToElement('#anchor0')" value="LINK 0" type="button"></li> 
     <li><input role="link" class="btn li-max-width" onclick="scrollToElement('#anchor1')" value="LINK 1" type="button"></li> 
     <li><input role="link" class="btn li-max-width" onclick="scrollToElement('#anchor2')" value="LINK 2" type="button"></li> 
     <li><input role="link" class="btn li-max-width" onclick="scrollToElement('#anchor3')" value="LINK 3" type="button"></li> 
     </ul> 

    </div> 
    </div> 
</nav> 

CSS:

.dropdown-pos{ 
    position: static; 
} 

Answer 2

Geben Sie das Floating-Menü einen oberen Rand. Wie pro Ihre Geige:

.open>.dropdown-menu { 
    display: block; 
    margin-top: 54px; 
} 

Answer 3

Das Problem von Klasse gemacht wird 'col-md-1', mit dieser Klasse. 'Dropdown' div hat height = 0; setzen eine Höhe, dieses Problem beheben .dropdown kann ;

<div class="dropdown" style="height:40px"> 

oder clearfix Klasse es

<div class="dropdown clearfix"> 

Answer 4

Wie immer hinzufügen, können Sie Werte codieren gewünschtes Ergebnis zu erreichen, aber ich denke, das Beste dafür ist clearfix hinzuzufügen als zu dropdown vorgeschlagen und entfernen min-height von navbar Klasse. Das Dropdown-Menü wird unter dem übergeordneten Element angezeigt, und die Navigationsleiste hat einen höheren Wert, sodass sich das Dropdown-Menü und die Navigationsleiste überlappen. Wenn Sie eine größere Lücke haben möchten, verwenden Sie einfach line-height in der Navigationsleiste, um Elemente und Stilelemente entsprechend zu zentrieren.

Arbeitsbeispiel http://www.bootply.com/giO0PF2LGs