bootstrap input-group not grouping

Question

我尝试使用input-group将这两个div组合在一起，所以它看起来像这样，但第一项是下拉选择。

现在看起来像什么

我听说过bootstrap在这里使用选择内容并不起作用。这可能吗？

我怎样才能让这两个人像第一张照片一样彼此相邻？

P.S。请看结构，我删除了因为专有的名称。

谢谢！

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
  <div class="col-md-4 col-sm-3" ng-init="vm.Current = vm.interval">
    <select class="form-control" ng-model="vm.Current" ng-options="interval.set for interval in vm.intervals"></select>
  </div>
  <ng-form name="intervalsForm">
    <div class="col-md-5 col-sm-9" ng-repeat="interval in vm.intervals" ng-show="vm.Current == interval">
      <ng-form name="singleForm">
        <input type="text" class="form-control" placeholder="HH:mm:ss" name="single" id="interval" ng-model="vm.Interval" ng-pattern="/^\d{2}:\d{2}:\d{2}$/" ng-class="{inputError: single.interval.$error.pattern && intervalForm.interval.$dirty || single.interval.$invalid || vm.settings.$submitted && intervalForm.interval.$invalid}" required/>
      </ng-form>
    </div>
  </ng-form>
  <span class="input-error-span" ng-show="(intervalsForm.$dirty || intervalsForm.$invalid) && intervalsForm.$invalid">{{ vm.validationMessages.intervalHHmm }}:ss</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以这样做：

.form-control .form-control {
    border:0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group">
  <span class="input-group-addon">
    <select></select>
  </span>
  <input type="text" class="form-control">
</div>

尝试自定义代码，使其看起来像这样。