Wie man (wide weight) Bootstrap ausrichten Dropdown-Menü mit Eingabefeld?

Question

Ich benutze Bootstrap wählen auf meinem Formular. Genau darunter habe ich ein Eingabefeld. Ich möchte die Breite der Eingabebox ähnlich der Auswahlbox haben. siehe

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-md-12"> 
     <select class="selectpicker"> 
     <option>Mustard</option> 
     <option>Ketchup</option> 
     <option>Relish</option> 
     </select> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-md-2"> 
    </div> 
    <div class="col-md-8"> 
     <input class="form-control" id="input_id" type="text" value="" /> 
    </div> 
    <div class="col-md-2"> 
    </div> 
    </div> 
</div> 

Bitte: https://jsfiddle.net/5L30q27f/8/

In Bootstrap-select.css scheint es, dass Breite auf 220px gesetzt wurde. Ich könnte die genaue Breite für meine Eingabebox verwenden, aber ich denke nicht, dass das eine gute Idee wäre, da ich vermute, dass Bootstrap-select auf mobilen Geräten diese Breite auf etwas anderes ändert.

Momentan kontrolliere ich die Breite meiner Eingabebox mit Spalten, aber es ist nicht die richtige Lösung. (Die Breite scheint abhängig von der Bildschirmgröße zu variieren.)

Ich benutze Bootstarp zum ersten Mal. Es besteht also eine gute Chance, dass ich etwas Offensichtliches übersehe, das von Bootstrap bereitgestellt wird, um dieses Problem zu lösen.

Können Sie mir bitte eine richtige Richtung zeigen?

Answer 1

Bootstrap hat einige Optionen zum Einstellen der Breite eines Elements abhängig von der Bildschirmgröße http://getbootstrap.com/css/#grid-options. Ändern Sie den Gürtel, um die xs Option in Ihrer Geige zu verwenden, erhalten Sie das gewünschte Ergebnis.

https://jsfiddle.net/5L30q27f/9/