对齐输入字段和按钮

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>