Bootstrap导航链接延伸到导航栏的底部

时间:2015-05-14 19:49:09

标签: css twitter-bootstrap

我有一个按计划运行的引导程序导航,除非在移动设备上以横向视图显示。在这种情况下,展开菜单底部的链接会超出导航栏的底部。有线索吗? (注意我使用的是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>

0 个答案:

没有答案