如何放置由引導程序的導航欄打開的div

我有一個引導程序粘滯導航欄，其中包含一個按鈕，該按鈕會打開一個包含可點擊鏈接列表的下拉格。如何放置由引導程序的導航欄打開的div

我Bootply（類似於jsfidlle）：http://www.bootply.com/T69XCh0Vei

使用CSS，我想定位該div剛剛下了導航欄，以任何合理的屏幕寬度，包括移動。

將div的位置設置爲'relative'並不能幫助我，因爲它包含在導航欄內，導致導航欄的高度超出範圍。

代碼示例：

<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>

來源

2016-11-08 Stavm

也許嘗試使用上下拉容器的邊緣之間的VW規模。即。 ul.dropdown-menu {margin-left：10vw}並根據需要爲較小的視口使用媒體查詢。 – Korgrue

@Korgrue如果可能，我寧願避免將div放在適當的位置，手動對每個屏幕，這可能會變得非常混亂。 – Stavm

可以實現以最小的變化所需的結果。只需添加任何自定義類，例如：dropdown-pos至<div class="dropdown">並給出position: static的樣式。

的問題是position: relative風格是默認應用到dropdown類。這使得dropmenu粘在其父元素的底部。

檢查工作演示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; 
}

來源

2016-11-11 06:44:08

你釘了它。很好找。 – Stavm

給浮動菜單的頂緣。按您的提琴：

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

來源

2016-11-11 01:23:06

問題是由類「COL-MD-1」製成，具有這個類，「下拉列表」 div有高度= 0;設置一個高度.dropdown可以解決這個問題;

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

或添加clearfix類，它

<div class="dropdown clearfix">

來源

2016-11-11 02:35:46

與往常一樣，你可以硬編碼值來實現期望的結果，但我認爲最好的，這是因爲建議增加clearfix到dropdown和刪除min-height從navbar類。下拉菜單顯示在父元素下方，導航欄的值較大，因此下拉菜單和導航欄重疊。如果你想要有更大的差距，只需在導航欄上使用line-height即可根據這個值垂直居中元素和樣式元素。

工作實例http://www.bootply.com/giO0PF2LGs

來源

2016-11-11 04:24:07 Aleksandar

如何放置由引導程序的導航欄打開的div

回答

相關問題