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

一个<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">  <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>内可以有多个按钮。像这样：

library(ggplot2)
months <- 1:12
age_y <- rep(0:2, 4)
counts <- c(659, 508, 430, 303, 201, 180, 203, 318, 401, 500, 790, 630)
df <- cbind.data.frame(months, age_y, counts)
ggplot(df, aes(x = months, y = counts)) + geom_area() + facet_grid(.~age_y) -> p

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>

对齐输入字段和按钮

2 个答案: