html - 对齐输入字段和按钮

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>

这是结果的截图:

如您所见，两个按钮与输入字段不在同一行，而且它们也不均匀(说到尺寸)...
有什么帮助吗？!

更新:更新了代码(感谢 Mukesh Ram)，但按钮仍然有两种不同的尺寸。

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>