부트 스트랩의 Navbar에 의해 열린 div를 배치하는 방법

Question

클릭 가능한 링크 목록이 포함 된 드롭 다운 div를 여는 버튼이있는 부트 스트랩 스티키 네비게이션 막대가 있습니다.

내 Bootply (유사 jsfidlle합니다) : http://www.bootply.com/T69XCh0Vei

CSS를 사용하여, 나는 모바일을 포함한 모든 적절한 화면 너비에, 그건 그냥 네비게이션 바에서 div에 배치하고 싶습니다.

div의 위치를 ​​'relative'로 설정하면 navbar 내부에 포함되어있어 navbar의 높이가 일정 범위를 벗어납니다.

코드 샘플 :

<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

'. 드롭 다운 '을 사업부가 높이 = 0;이 문제를 해결할 수 .dropdown 할 수있는 높이를 설정 ;

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

또는

<div class="dropdown clearfix"> 

Answer 4

는 언제나처럼, 당신이 원하는 결과를 달성하기 위해 값을 하드 코딩 할 수 있지만, 나는이에 대한 최고의 제안 dropdown에 clearfix를 추가하고 min-height을 제거하는 것입니다 생각 그것에 clearfix 클래스를 추가 navbar 클래스 드롭 다운 메뉴는 상위 요소 아래에 표시되며 navbar는 더 큰 값을 갖기 때문에 드롭 다운 메뉴와 navbar가 겹쳐집니다. 더 큰 간격을두고 싶으면 네비게이션에 line-height을 사용하여 요소와 스타일 요소를 수직으로 가운데에 맞 춥니 다. 당신은 최소 변경으로 원하는 결과를 얻을 수 http://www.bootply.com/giO0PF2LGs