我有一个使用引导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的顶部。我究竟做错了什么?
你想固定头? – vel
使用'
是啊,也许你只是想要一个固定的导航栏/标题 – LecheDeCrema