AngularJS Twitter Bootstrap 导航栏内的下拉菜单
AngularJS Twitter Bootstrap dropdown menu inside Nav bar
我正在尝试在带有 Angular-UI Bootstrap 的导航栏中包含一个下拉菜单。请看这个 plnkr
我玩过 css,我可以让它在桌面版本上工作。但是当涉及到移动视图时,我还需要做很多其他的样式。很明显我做错了什么。有人可以告诉我我做错了什么吗?
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<a href="/" class="navbar-brand"><span class="brand-title"></span></a>
<a class="btn navbar-btn navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div class="navbar-collapse collapse" >
<div class="pull-left navbar-logo">
<ul class="nav navbar-nav" >
<li>
<a data-ng-href="#/Search">Search</a>
</li>
<li>
<a data-ng-href="#/Search">Search2</a>
</li>
<div class="btn-group" uib-dropdown >
<a id="single-button" uib-dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</a>
<ul uib-dropdown-menu role="menu" aria-labelledby="single-button">
<li role="menuitem"><a href="#">Action</a></li>
<li role="menuitem"><a href="#">Another action</a></li>
<li role="menuitem"><a href="#">Something else here</a></li>
<li class="divider"></li>
<li role="menuitem"><a href="#">Separated link</a></li>
</ul>
</div>
</ul>
</div>
</div>
</nav>
尝试替换以下内容:
<div class="btn-group" uib-dropdown>
...
</div>
与:
<li uib-dropdown>
...
</li>
我正在尝试在带有 Angular-UI Bootstrap 的导航栏中包含一个下拉菜单。请看这个 plnkr 我玩过 css,我可以让它在桌面版本上工作。但是当涉及到移动视图时,我还需要做很多其他的样式。很明显我做错了什么。有人可以告诉我我做错了什么吗?
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<a href="/" class="navbar-brand"><span class="brand-title"></span></a>
<a class="btn navbar-btn navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div class="navbar-collapse collapse" >
<div class="pull-left navbar-logo">
<ul class="nav navbar-nav" >
<li>
<a data-ng-href="#/Search">Search</a>
</li>
<li>
<a data-ng-href="#/Search">Search2</a>
</li>
<div class="btn-group" uib-dropdown >
<a id="single-button" uib-dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</a>
<ul uib-dropdown-menu role="menu" aria-labelledby="single-button">
<li role="menuitem"><a href="#">Action</a></li>
<li role="menuitem"><a href="#">Another action</a></li>
<li role="menuitem"><a href="#">Something else here</a></li>
<li class="divider"></li>
<li role="menuitem"><a href="#">Separated link</a></li>
</ul>
</div>
</ul>
</div>
</div>
</nav>
尝试替换以下内容:
<div class="btn-group" uib-dropdown>
...
</div>
与:
<li uib-dropdown>
...
</li>