對齊輸入字段和按鈕

Question

我試圖將兩個按鈕對齊到廣告輸入字段，但最終每一次都弄亂了所有內容。
我已經將輸入字段與單個按鈕對齊，但我無法添加第二個按鈕。

這是HTML（我使用一些angularjs）：

<div class="row"> 
    <div class="col-lg-12"> 
     <form class="form" ng-submit="vm.reCreateTree(ricercaSecondario)" ng-init="aggiornaRicercaPratica()"> 
      <div class="input-group">        
       <input type="text" ng-model="vm.cercaSecondario" class="form-control" placeholder="{{getTestoPlaceholderRicerca(ricercaPraticaSecondario)}}" required="required" ng-disabled="disabilitaRicercaSecondaria()"> 
        <div class="input-group-btn"> 
         <button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button> 
         <button class="btn btn-default" type="submit" 
          tooltip="Espandi filtri di ricerca" tooltip-placement="bottom" 
          ng-click="toggleRicerca()" ng-show='user.ambitoSelezionato.nome == "Clienti-Polizze"'> 
         <i ng-class="{'fa fa-caret-up': showEspandiRicerca, 'fa fa-caret-down': !showEspandiRicerca}"></i> 
         </button> 
        </div>  
      </div>        
     </form> 
    </div> 
</div> 

這是結果的截圖：

正如你可以看到兩個按鈕都沒有在與輸入字段相同的行，他們也不均勻（談到維度）...
任何幫助？

更新：更新代碼（感謝穆克什拉姆），但按鍵還是有兩種不同的尺寸..

Answer 1

你可以有一個.input-group-btn內的多個按鈕。就像這樣：

<div class="col-lg-6"> 
    <div class="input-group"> 
     <input type="text" class="form-control" aria-label="Text input with multiple buttons"> 
     <div class="input-group-btn"> <!-- add button in this div --> 
     <button type="button" class="btn btn-default" aria-label="Help"> 
      <span class="glyphicon glyphicon-question-sign"></span> 
     </button> 
     <button type="button" class="btn btn-default">Action</button> 
     </div> 
    </div> 
</div> 

Answer 2

另一種方式：
form-inline和form-group

Bootply：http://www.bootply.com/uHEpGIOLwY

<div class="row"> 
     <div class="col-lg-12"> 
     <form class="form-inline" ng-submit="vm.reCreateTree(ricercaSecondario)" ng-init="aggiornaRicercaPratica()"> 
      <div class="form-group"> 
      <input type="text" ng-model="vm.cercaSecondario" class="form-control" placeholder="{{getTestoPlaceholderRicerca(ricercaPraticaSecondario)}}" required="required" ng-disabled="disabilitaRicercaSecondaria()"> 
      <button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button> 
      <button class="btn btn-default" type="submit" tooltip="Espandi filtri di ricerca" tooltip-placement="bottom" ng-click="toggleRicerca()" ng-show='user.ambitoSelezionato.nome == "Clienti-Polizze"'> 
       <i ng-class="{'fa fa-caret-up': showEspandiRicerca, 'fa fa-caret-down': !showEspandiRicerca}"></i> 
      </button> 
      </div> 
     </form> 
     </div> 
    </div>