2つの自動幅要素と1つの入力が残りの幅を充填するブートストラップ入力グループ

Question

input-groupアイコン（固定幅）、select（自動幅、オプションによって異なります）、テキストinput残りの幅を埋める。ここで

はスケルトンです：ここでは

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

は抜粋です：http://jsfiddle.net/qPdcs/722/

それは動作しません、入力が選択の下に表示されているため。 私はさまざまなアプローチを試みました：幅、浮動小数点、テーブルセル、空白で演奏しましたが、私が必要とする正確な結果は何もありません。申し訳ありませんが同じ質問がある場合、私はそれを見つけることができませんでした。

どんなアイディアですか？

Answer 1

はこれを試してみてください。

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

楽しい