引導+移動菜單疊加

Question

我有一個使用引導3.在本頁面一個頁面，我有一個像下面定義的導航欄：

<nav class="navbar" style="background-color:orange;"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" style="color:#000 !important;"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar" style="color:#000;"></span> 
     <span class="icon-bar" style="color:#000;"></span> 
     <span class="icon-bar" style="color:#000;"></span> 
     </button> 
    </div> 

    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="dropdown"> 
      <a href="/home" class="dropdown-toggle navbar-dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
      Home <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="/help">help</a></li> 
      <li><a href="/help">contact</a></li>    
     </ul> 
     </li> 
     </ul> 

     <div class="navbar-right"> 
     <div class="visible-xs"> 
      <div class="row"> 
      <div class="col-xs-6"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">2016</a> 
       <ul class="dropdown-menu dropdown-menu-right"> 
       <li><a href="#" data-toggle="modal" data-target="_blank">Q1</a></li> 
       <li><a href="#" target="_blank">Q2</a></li> 
       <li><a href="#" target="_blank">Q3</a></li> 
       <li><a href="#" target="_blank">Q4</a></li>     
       </ul> 
      </div> 

      <div class="col-xs-6"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">2017</a> 
       <ul class="dropdown-menu dropdown-menu-right"> 
       <li><a href="#" data-toggle="modal" data-target="_blank">Q1</a></li> 
       <li><a href="#" target="_blank">Q2</a></li> 
       <li><a href="#" target="_blank">Q3</a></li> 
       <li><a href="#" target="_blank">Q4</a></li>     
       </ul> 
      </div> 
     </div> 
     </div> 

     <div class="hidden-xs"> 
     <ul class="nav navbar-nav"> 
      <li> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">2016</a> 
       <ul class="dropdown-menu dropdown-menu-right"> 
       <li><a href="#" data-toggle="modal" data-target="_blank">Q1</a></li> 
       <li><a href="#" target="_blank">Q2</a></li> 
       <li><a href="#" target="_blank">Q3</a></li> 
       <li><a href="#" target="_blank">Q4</a></li>     
       </ul> 
      </li> 

      <li> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">2017</a> 
       <ul class="dropdown-menu dropdown-menu-right"> 
       <li><a href="#" data-toggle="modal" data-target="_blank">Q1</a></li> 
       <li><a href="#" target="_blank">Q2</a></li> 
       <li><a href="#" target="_blank">Q3</a></li> 
       <li><a href="#" target="_blank">Q4</a></li>     
       </ul>    
      </li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</div> 
</nav> 

導航欄的外觀和工作方式我想在更大的屏幕。但在移動設備上，它無法正常工作。正如你在Bootply中看到的那樣，導航菜單向下推動主內容（Lorem Ipsum）。但是，我希望導航菜單出現在內容的頂部，以便移動導航出現在Lorem Ipsum的頂部。我究竟做錯了什麼？

Answer 1

你想是這樣的：

http://www.bootply.com/9OB6nhtg4i#

@media (max-width:768px) { 
     .navbar { 
     position: absolute; 
     } 
    } 

添加這個CSS和嘗試。

Answer 2

ü需要使用navbar-fixed-top類和main塊機頂盒填充：

main { 
padding-top: 60px; 
} 

http://www.bootply.com/aROSWOLDZY