在移动设备上,Bootstrap 3的默认行为是在菜单单击时带有标准导航菜单,将内容向下推到页面上。相反,我将其覆盖内容。但是问题是,我需要这个覆盖层才能达到100%的高度。
我不能使用固定导航栏,因为我不希望菜单,标题或导航跟随我进入页面。
/* Primary Navigation styles */
.navbar { margin-bottom: 0; }
.navbar .navbar-collapse { z-index: 99; }
.navbar-toggle { float: left; margin-left: 15px; margin-right: 0; }
@media (max-width: 1200px) {
/* Primary Navigation responsive styles */
.navbar-nav { float: none!important; margin: 7.5px -15px; }
.navbar-nav>li { float: none; }
.navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px; }
.navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; }
.navbar .navbar-collapse { position: absolute; width: 100%; background-color: white;}
.navbar-default .navbar-toggle { border: 0 none; margin-top: 28px; margin-bottom: 0; }
.navbar-header { height: 90px; position: relative; float: none; }
.navbar-toggle { display: block; }
.navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); }
.navbar-collapse.collapse { display: none!important; }
.collapse.in { display: block !important; }
}
@media (min-width: 1201px) {
/* Primary Navigation responsive styles */
.navbar { min-height: 0; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease-out; -o-transition: all 0.6s ease-out; -ms-transition: all 0.6s ease-out; transition: all 0.6s ease-out; border-radius: 0px; }
.navbar-nav{ float:none; margin: 0 auto; display: table; table-layout: fixed; }
.navbar-nav > li > a { padding: 10px 29px; }
}
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-2">
<ul class="nav navbar-nav">
<li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Menu Option</a>
<ul class="dropdown-menu">
<li>
<div class="row">
sample text
</div>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>