Bootstrap-Eingabegruppe mit zwei auto-width Elementen und einer Eingabe Füllung verbleibende Breite

Question

Ich muss eine 1-Zeile input-group mit Symbol (feste Breite), dann select (automatische Breite, hängt von den Optionen) und dann Text input Restbreite ausfüllen. Hier

ist das Skelett:

<div class="input-group"> 
    <span class="input-group-addon" id="basic-addon1">@</span> 
    <select class="form-control"> 
    <option>Something</option> 
    <option>Another</option> 
    </select> 
    <input type="text" class="form-control" placeholder="Username"> 
</div> 

Hier ist der Code-Schnipsel: http://jsfiddle.net/qPdcs/722/

Es funktioniert nicht, da die Eingabe unter der Auswahl angezeigt wird. Ich habe verschiedene Ansätze ausprobiert: gespielt mit Breiten, Floats, Tabellenzellen, Leerraum, aber nichts gibt genau das Ergebnis, was ich brauche. Entschuldigung wenn es die gleiche Frage gibt, konnte ich es nicht finden.

Irgendwelche Ideen mates?

Answer 1

versuchen Sie dies:

<div class="input-group"> 
    <span class="input-group-addon" id="basic-addon1">@</span> 
    <select class="form-control" style="width: 40%;"> 
     <option>Something</option> 
     <option>Another</option> 
    </select> 
    <input type="text" class="form-control" placeholder="Username"> 
</div> 

<style> 
.input-group { 
    display: flex; 
} 

.input-group-addon { 
    width: 50px; 
} 
</style> 

Spaß haben