ブートストラップの選択ドロップダウンを入力ボックスに合わせるにはどうすればいいですか？

Question

私は自分のフォームにブートストラップセレクトを使用しています。私は入力ボックスを持っています。 私は入力ボックスの幅を選択ボックスに似ています。

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

ご参照ください：ブートストラップ・select.cssでhttps://jsfiddle.net/5L30q27f/8/

を、幅を220pxに設定されていることが表示されます。 私は入力ボックスに正確な幅を使うことができましたが、私はモバイルデバイスのbootstrap-selectがその幅を何か他のものに変更している可能性があるので、それは良い考えではないと思います。

現在、私は入力ボックスの幅を列で制御していますが、適切な解決策ではありません。 （画面のサイズによって幅が異なるように見えます）。

初めてブートストラップを使用しています。だから、この問題を解決するためにブートストラップによって提供される明白なものを見落としている可能性が高いです。

私に正しい方向を教えてください。

Answer 1

ブートストラップには、画面サイズに応じて要素の幅を設定するためのオプションがいくつかあります。http://getbootstrap.com/css/#grid-optionsファイヤーでxsオプションを使用するようにgirdを変更すると、結果が得られます。フォーム要素の幅を設定する列を使用し

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