問題與搜索頭對準引導

Question

我使用下面的代碼，包括在頭搜索，但無法正確對齊基於長度

我希望搜索等排列如下

所以，如果我添加一個新的菜單頭，然後它應該自動調整可用空間。現在

，它出現像下面

鏈接代碼：https://plnkr.co/edit/GH6Pogkd8LBbETfZRFtm?p=preview 測試

 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#he-nav-bar"> 
     <span class="sr-only">${Toggle navigation}</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 


    <div sp-navbar-toggle="" class="collapse navbar-collapse navbar-right" id="he-nav-bar"> 
    /**added search here**********/ 
<form method="get" action="?"> 
    <input type="hidden" name="id" value="search"/> 
    <input type="hidden" name="t" value="{{data.searchType}}"/> 
    <div class="input-group input-group-{{::c.options.size}}"> 
    <!-- uses ui.bootstrap.typeahead --> 
    <input name="q" type="text" placeholder="{{::c.options.title}}" ng-model="c.selectedState" 
      ng-model-options="{debounce: 250}" autocomplete="off" 
      uib-typeahead="item as item.label for item in c.getResults($viewValue)" 
      typeahead-focus-first="false" 
      typeahead-on-select="c.onSelect($item, $model, $label)" 
      typeahead-template-url="sp-typeahead.html" class="form-control input-typeahead"> 
    <span class="input-group-btn"> 
     <button name="search" type="submit" class="btn btn-{{::c.options.color}}"> 
     <i ng-if="::c.options.glyph" class="fa fa-{{::c.options.glyph}}"></i> 
     </button> 
    </span> 
    </div> 
</form> 
     <ul ng-if="" class="nav navbar-nav"> 
     <li><a href ng-click="openLogin()">${Login}</a></li> 
     </ul> 
     <ul ng-if="" class="nav navbar-nav">   
     <li ng-if="><a href ng-click="openPopUp()">${Help}</a></li> 
     <li class="dropdown hidden-xs"> 
      <ul class="dropdown-menu"> 
      <li><a ng-href="">${menu}</a></li> 
      <li><a href="">${submenu}</a></li> 
      </ul> 
     </li> 
     <li class="visible-xs-block"><a ng-href=""><span class="navbar-avatar"><sn-avatar class="avatar-small-medium" /></span>${name}</a></li> 
     <li class="visible-xs-block"><a href="">${Logout}</a></li> 
     </ul> 
    </div> 

    </nav> 
</div> 

感謝 克里希納

Answer 1

I think below code will work for you, 

https://plnkr.co/edit/wPW3AoWvLm37Lz29Pq2Z?p=preview