ブートストラップ入力グループがグループ化されていません

Question

input-groupを使用してこれらの2つのdivをグループ化して、最初のアイテムがドロップダウン選択であるようにしています。

今

のように見えるものである私は、ブートストラップがここでの選択内部を使用して動作しないと聞きました。これはここで可能ですか？

最初の写真のように、2人を隣り合わせにするにはどうすればいいですか？

P.S.構造だけを見てください、私は専売品のために物の名前を削除します。

ありがとうございます！

<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>

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>

を、それは次のようになりますので、あなたのコードをカスタマイズしてみてください。