使用Bootstrap使输入/表单栏响应
[英]Making input/form bar responsive using Bootstrap
问题描述
I have a banner going across a page that allows the user to filter the data displayed. 
我的横幅横穿页面，允许用户过滤显示的数据。 This needs to be responsive. 这需要有所响应。 However when decreasing the size of the browser window the date picker (jQuery datepicker) buttons go to a different line, and the whole thing looks, frankly, horrific. 但是，当减小浏览器窗口的大小时，日期选择器（jQuery datepicker）按钮会移到另一行，坦白地说，整个过程看起来很恐怖。 The submit button goes ove the top of things too. 提交按钮也位于最上方。 I have experimented with media queries but, to be honest, I am not hugely familiar with Bootstrap responsive layouts. 我已经尝试过媒体查询，但是老实说，我对Bootstrap响应式布局并不十分熟悉。 This is an existing project that I am extending, so any advice hugely appreciated. 这是我正在扩展的现有项目，因此任何建议都将不胜感激。 There are 2 external controls used: jQuery datepicker and Sumo Select. 使用了2个外部控件：jQuery datepicker和Sumo Select。 Markup below: 标记如下：
<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>
There is CSS to make the h3 tags display inline with the form fields. 有CSS可以使h3标签在表单字段中内嵌显示。 This goes awry too when the browser viewport is resized. 调整浏览器视口大小时，这也变得很糟糕。
1 个解决方案
解决方案1
0 2017-06-27 05:47:21
Try this 尝试这个
.datepicker{display: inline-block; width: 94%;}
<html> <head> <title>Test</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> .datepicker{display: inline-block; width: 94%;} </style> </head> <body> <div class="container-fluid"> <div class="row"> <div class=" col-md-3 col-sm-6 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-md-3 col-sm-6 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-md-2 col-sm-6 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-md-3 col-sm-6 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-md-1 col-sm-12 no-gutter text-center"> <div class="form-inline "> <h3> </h3> <input type="submit" value="Submit" class="primary"> </div> </div> </div> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.