bootstrap Eingabegruppe nicht Gruppierung

Question

Ich versuche input-group zu verwenden, um diese zwei Divs zu gruppieren, so dass es so aussieht, aber mit dem ersten Element, das ein Dropdown-Auswahl ist.

Was sieht aus wie jetzt

Ich habe gehört, dass Bootstrap nicht wählen innerhalb von hier mit nicht funktioniert. Ist das hier drin möglich?

Wie bekomme ich die beiden nebeneinander wie das erste Bild?

P.S. schau dir einfach die Struktur an, ich entferne Namen von Sachen, weil proprietär.

Danke!

<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

Sie können dies wie folgt:

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

Versuchen Sie den Code anpassen, so dass es so aussieht.