带有小的ui-select和input-group-sm的form-inline

时间:2019-05-21 15:42:10

标签: css twitter-bootstrap-3 ui-select

我需要将 small 用户界面选择与 small 输入组元素以内联形式放置。

我用form-groupform-group-sm类包装了ui-select。但是结果是,我对ui-select和input-group的垂直对齐方式有所不同。

您可以在这里看到它

screenshot

这是一个代码

  <div class="form-inline" style="width:500px">

  <div class="form-group form-group-sm">
    <ui-select ng-model="ctrl.address.selected"
             theme="bootstrap"
             ng-disabled="ctrl.disabled"
             title="Address">
    <ui-select-match placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match>
    <ui-select-choices repeat="address in ctrl.addresses track by $index"
             refresh="ctrl.refreshAddresses($select.search)"
             refresh-delay="0">
      <div ng-bind-html="address.formatted_address | highlight: $select.search"></div>
    </ui-select-choices>
  </ui-select>
  </div>
  <div class="input-group input-group-sm">
    <input type="text" class="form-control" placeholder="Search" aria-describedby="search" style="width: 100px"/>
    <span class="input-group-addon" id="search">
      <i class="fa fa-search" aria-hidden="true"></i>
    </span>
  </div>

  </div>

这里是demo

如何使两个元素在垂直方向上均等对齐?

0 个答案:

没有答案