Ausgabe mit Ausrichtung der Suche in der Header-Bootstrap

Question

ich den Code unten bin mit Suche in Header enthalten, aber nicht mehr richtig auf die Länge basierend auszurichten

i die Suche wollen wie ausgerichtet werden unter

Wenn ich also ein neues Menü zum Header hinzufüge, sollte es automatisch den verfügbaren Platz anpassen.

Nun, es ist wie unten erscheinen

Link zu Code: https://plnkr.co/edit/GH6Pogkd8LBbETfZRFtm?p=preview -Test

 <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> 

Dank Krishna

Answer 1

I think below code will work for you, 

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