0
私は、表示されたデータをフィルタリングするためのページを横断するバナーを持っています。これは応答性が必要です。しかし、ブラウザウィンドウのサイズを小さくすると、日付ピッカー（jQuery datepicker）のボタンが別の行に表示され、全体的に見て、率直に、恐ろしいものになります。サブミットボタンは物事の上にあふれています。私はメディアのクエリを試したことがありますが、正直言って、私はブートストラップ応答レイアウトにはあまり慣れていません。これは私が拡張している既存のプロジェクトなので、どんなアドバイスも大変感謝しています。 2つの外部コントロールが使用されています：jQuery datepickerとSumo Select。以下のマークアップ：ブートストラップを使用して入力/フォームバーを応答させる
<div class="container-fluid">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 no-gutter">
<div class="form-inline inline-fields ">
<h3>From</h3>
<input class="form-control dateField datepicker" id="dateRangeFrom" name="dateRangeFrom" type="text" value="" placeholder="dd/mm/yyyy"><button type="button" class="ui-datepicker-trigger btn btnCalendar"><span class="calendarIcon"></span></button>
</div>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 no-gutter">
<div class="form-inline inline-fields ">
<h3>To</h3>
<input class="form-control dateField datepicker" id="dateRangeTo" name="dateRangeTo" type="text" value="" placeholder="dd/mm/yyyy"><button type="button" class="ui-datepicker-trigger btn btnCalendar"><span class="calendarIcon"></span></button>
</div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 no-gutter">
<div class="left form-inline">
<h3>Status</h3>
<div class="SumoSelect" tabindex="0">
<select class="sumo-select form-control" id="SelectOptions" multiple="multiple" name="SelectOptions">
<option value="0">Option 0</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 no-gutter">
<div class="form-inline ">
<h3>Search</h3> <input class="form-control search" id="SearchText" name="SearchText" type="text" value="">
</div>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 no-gutter">
<input type="submit" value="Submit" class="primary">
</div>
</div>
</div>フォームフィールドとH3タグの表示インラインを作るためにCSSがあります。ブラウザのビューポートのサイズが変更されても、これはうまくいかなくなります。
はあなたがあまりにもjQueryとCSSを提供することができます試してみてください？ – InvincibleM