divを配置する方法、ブートストラップのNavbarで開く

Question

クリック可能なリンクのリストを含むドロップダウンdivを開くボタンを含むブートストラップのスティッキーなナビゲーションバーがあります。

私Bootply（似たjsfidlleする）：http://www.bootply.com/T69XCh0Vei

CSSを使用して、私は携帯電話を含む任意の合理的な画面の幅、で、それはちょうどナビゲーションバーの下のdiv位置したいと思います。

divの位置を '相対'に設定しても、navbarの高さが縮む原因となるnavbar内に含まれているため、divには役立ちません。

コードサンプル：

<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

あなたは最小限の変更で所望の結果を達成することができます。任意のカスタムクラス（例：dropdown-pos〜<div class="dropdown">）を追加して、スタイルposition: staticを付けてください。

問題は、デフォルトではdropdownクラスに を適用しているposition: relativeスタイルです。ドロップメニューは親要素の の一番下に貼り付けます。

チェックワーキングデモ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

は、フローティングメニューに上マージンを与えます。あなたのフィドルあたりとして：問題は、クラスのCOL-MD-1」によって作られ

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

Answer 3

、このクラスに、「ドロップダウン」divが、高さ= 0を持っている。.dropdownする高さを設定し、この問題を解決することができます;

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

または

<div class="dropdown clearfix"> 

Answer 4

はいつものように、あなたは望ましい結果を達成するために値をハードコーディングすることができますが、私は、このための最善の提案としてdropdownにclearfixを追加し、min-heightを取り除くことだと思い、それにclearfixクラスを追加navbarクラスからドロップダウンメニューが親要素の下に表示され、ナビゲーションバーの値が大きいので、ドロップダウンメニューとナビゲーションバーが重なって表示されます。より大きなギャップが必要な場合は、ナビゲーションバーにline-heightを使用して、要素とスタイル要素を垂直方向に中央に配置します。

の作業例http://www.bootply.com/giO0PF2LGs