2016-12-16 96 views
0

我有一个使用引导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的顶部。我究竟做错了什么?

+0

你想固定头? – vel

+1

使用'

+0

是啊,也许你只是想要一个固定的导航栏/标题 – LecheDeCrema

回答

相关问题