AngularJS Twitter Bootstrap выпадающее меню внутри панели навигации

Question

Я пытаюсь включить выпадающее меню внутри навигационной панели с помощью 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> 

Answer 1

Попробуйте заменить следующее:

<div class="btn-group" uib-dropdown> 
    ... 
</div> 

С:

<li uib-dropdown> 
    ... 
</li>