複数の入力フィールドがインラインであるブートストラップ検索バー

Question

私はブートストラップにウェブサイトを構築しており、ページ上のアイテムにはfilter barを作成する必要があります。 1つ以上の入力フィールド（赤いもの）と1つ以上のドロップダウン（青いもの）を持つバーを作成するにはどうすればいいですか？バーの幅は常にcolの100％にする必要があります。

例はBootplyです。上の写真のように、すべてを1行に入れるにはどうしたらいいですか？

Answer 1

これを解決する方法はいくつかあります。一つの方法は、あなたがブートストラップで賢く列を使用する必要があり

<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 form-inline"> 
    Price from 
    <input type="text" class="form-control input-sm" placeholder="min"> 
    to 
    <input type="text" class="form-control input-sm" placeholder="max"> 
    <select type="text" class="form-control input-sm"> 
     <option selected="">EUR</option> 
     <option value="1">USD</option> 
    </select> 
</div> 

http://bootply.com/sDZybGTQeT

Answer 2

...フォームインラインを使用して、入力のための特定の狭い幅を定義することです。ブートストラップが12列のグリッドであるため、すべての列の合計は12でなければなりません。以下のコードを試してください。それをフルページビューで見る。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container-fluid"> 
 
<div class="row"> 
 
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2"> 
 
    Price from 
 
    </div> 
 
    <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3"> 
 
    <input type="text" class="form-control" placeholder="min"> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-12 col-md-1 col-lg-1"> 
 
    to 
 
    </div> 
 
    <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3"> 
 
    <input type="text" class="form-control" placeholder="max"> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3"> 
 
    <select type="text" class="form-control"> 
 
     <option selected="">EUR</option> 
 
     <option value="1">USD</option> 
 
    </select> 
 
</div> 
 
</div> 
 
</div>