我想,當導航欄處於摺疊狀態,已經「分離」菜單項...引導3導航欄分開摺疊的菜單項和非坍塌
這裏是我試過到目前爲止,但它看起來不正確當導航欄未摺疊,因爲導航欄將溢出到兩行:
<nav class="navbar navbar-default navbar-static-top" ng-controller="NavbarCtrl">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" ng-click="isCollapsed = !isCollapsed" data-toggle="collapse"
data-target="#navbar-main">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/" class="navbar-brand"><img src="favicon-32.png"></a>
</div>
<div collapse="isCollapsed" class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav hidden-xs">
<li ng-repeat="item in menu" ng-class="{active: isActive(item.link)}">
<a ng-href="{{item.link}}">{{item.title}}</a>
</li>
</ul>
<!-- Navbar items visible when collapsed -->
<ul class="nav navbar-nav navbar-right visible-xs">
<li ng-hide="isLoggedIn()" ng-class="{active: isActive('/login')}"><a href="/login">Login</a></li>
<li ng-show="isLoggedIn()"><p class="navbar-text">Hello {{ getCurrentUser().name }}</p></li>
<li ng-show="isLoggedIn()" ng-class="{active: isActive('/logout')}"><a href="" ng-click="logout()">Logout</a>
</li>
</ul>
</div>
<!-- Navbar items visible when not collapsed -->
<ul class="nav navbar-nav navbar-right hidden-xs">
<li ng-hide="isLoggedIn()" ng-class="{active: isActive('/login')}"><a href="/login">Login</a></li>
<li ng-show="isLoggedIn()"><p class="navbar-text">Hello {{ getCurrentUser().name }}</p></li>
<li ng-show="isLoggedIn()" ng-class="{active: isActive('/logout')}"><a href="" ng-click="logout()">Logout</a></li>
</ul>
</div>
</nav>
你是什麼意思的「兩排」? – Mouneer