我想用 CSS Bootstrap 制作一个漂亮的响应式搜索表单。
以下是我的 html 和 Bootstrap 代码:
<form class="form-inline" role="form" style="">
<div class="row">
<div class=" col-md-4 form-group group-1">
<div class="input-group">
<span class="btn-info input-group-addon"><span class="glyphicon glyphicon-search form-icon"></span></span>
<!--<span class="btn-info input-group-addon form-icon">Keyword</span>-->
<input type="text" id="searchjob" class="form-control" placeholder="Enter Keywords">
</div>
</div>
<div class="col-md-3 form-group group-1">
<div class="input-group">
<span class="btn-info input-group-addon"><span class="glyphicon glyphicon-globe form-icon"></span></span>
<!--<span class="btn-info input-group-addon form-icon">Location</span>-->
<select class="form-control">
<option>London</option>
<option>Kabul</option>
<option>Kabul</option>
<option>Kabul</option>
</select>
</div>
</div>
<div class="col-md-3 form-group group-1">
<div class="input-group">
<span class="btn-info input-group-addon"><span class="glyphicon glyphicon-question-sign form-icon"></span></span>
<!--<span class="btn-info input-group-addon form-icon">Category</span>-->
<select class="form-control" style="">
<option>Administration</option>
<option>Kabul</option>
<option>Kabul</option>
<option>Kabul</option>
</select>
</div>
</div>
<div class="col-md-2 form-group group-1">
<input type="submit" value="SEARCH" class="btn btn-warning form-top" style="margin-top: -1px">
</div>
</div>
</form>
这是它在笔记本电脑屏幕上的样子: enter image description here
这是它在移动设备上的样子: enter image description here
如您所见,它在具有全宽度表单输入的移动设备上看起来非常漂亮,但在我的笔记本电脑屏幕上看起来不太好。我想在每个设备屏幕上全宽。请帮忙。
最佳答案
只需将您的代码输入:<div class="container"> your code </div>
这样看起来会更好。
<div class="container">
<form class="form-inline" role="form" style="">
<div class="row">
<div class=" col-md-4 form-group group-1">
<div class="input-group">
<span class="btn-info input-group-addon"><span class="glyphicon glyphicon-search form-icon"></span></span>
<!--<span class="btn-info input-group-addon form-icon">Keyword</span>-->
<input type="text" id="searchjob" class="form-control" placeholder="Enter Keywords">
</div>
</div>
<div class="col-md-3 form-group group-1">
<div class="input-group">
<span class="btn-info input-group-addon"><span class="glyphicon glyphicon-globe form-icon"></span></span>
<!--<span class="btn-info input-group-addon form-icon">Location</span>-->
<select class="form-control">
<option>London</option>
<option>Kabul</option>
<option>Kabul</option>
<option>Kabul</option>
</select>
</div>
</div>
<div class="col-md-3 form-group group-1">
<div class="input-group">
<span class="btn-info input-group-addon"><span class="glyphicon glyphicon-question-sign form-icon"></span></span>
<!--<span class="btn-info input-group-addon form-icon">Category</span>-->
<select class="form-control" style="">
<option>Administration</option>
<option>Kabul</option>
<option>Kabul</option>
<option>Kabul</option>
</select>
</div>
</div>
<div class="col-md-2 form-group group-1">
<input type="submit" value="SEARCH" class="btn btn-warning form-top" style="margin-top: -1px">
</div>
</div>
</form>
</div>
要获得更好的结果,请参阅 container
的文档这里Container Bootstrap Documentation
关于html - 从 : make width 100% on every screen Bootstrap ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44467756/