我有一个按计划运行的引导程序导航,除非在移动设备上以横向视图显示。在这种情况下,展开菜单底部的链接会超出导航栏的底部。有线索吗? (注意我使用的是Angular,因此isCollapsed)。
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-ng-init="isCollapsed = true" data-ng-click="isCollapsed = !isCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand pull-left" href="#!home">My Menu</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" data-ng-class="{collapse: isCollapsed}">
<ul class="nav navbar-nav">
<li ng-click="isCollapsed=!isCollapsed"><a href="#!home"><i class="fa fa-home"></i>Home</a></li>
<li class="dropdown" data-ng-class="{ open : dd1 }" data-ng-init="dd1 = false" data-ng-click="dd1 = !dd1">
<a class="dropdown-toggle" role="button" aria-expanded="false"><i class="fa fa-exclamation-triangle"></i>Stuff <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li ng-click="isCollapsed=!isCollapsed"><a href="#!home"><i class="fa fa-search-plus"></i>Stuff 1</a></li>
<li ng-click="isCollapsed=!isCollapsed"><a href="#!add-item"><i class="fa fa-plus"></i>Stuff 2</a></li>
<li ng-click="isCollapsed=!isCollapsed"><a href="#!add-item"><i class="fa fa-refresh"></i>Stuff 3</a></li>
</ul>
</li>
<li class="dropdown" data-ng-class="{ open : dd2 }" data-ng-init="dd2 = false" data-ng-click="dd2 = !dd2">
<a class="dropdown-toggle" role="button" aria-expanded="false"><i class="fa fa-file"></i>More Stuff <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li ng-click="isCollapsed=!isCollapsed"><a href="#!home"><i class="fa fa-search-plus"></i>More Stuff 1</a></li>
<li ng-click="isCollapsed=!isCollapsed"><a href="#!add-item"><i class="fa fa-refresh"></i>More Stuff 2</a></li>
<li ng-click="isCollapsed=!isCollapsed"><a href="#!add-item"><i class="fa fa-upload"></i>More Stuff 3</a></li>
</ul>
</li>
</ul>
</div>