我正在使用Bootstrap 3.0进行工作,试图制作一个谷歌风格的搜索框,在提交按钮后面添加一个“搜索帮助”链接。
我的问题是:当我进行响应式设计时,我失去了偏移边距,按钮会换行。
我的问题是:当我进行响应式设计时,我失去了偏移边距,按钮会换行。
<div class="row search">
<div class="col-md-8 col-md-offset-2">
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="">Enter search terms</label>
<input type="search" class="form-control" id="k" name="k" placeholder="Enter search terms">
<input id="cn" name="cn" type="hidden" value="false" />
</div>
<button type="submit" id="s" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
<a href="#">Search Help</a>
</form>
</div>
</div>
参考链接:http://jsfiddle.net/redo1134/su3eq/2/
屏幕宽度在大于991px时一切正常,但当宽度小于等于991px时我失去了偏移量。
这显然与bootstrap.css中的#media (min-width: 992px)
媒体查询有关,但我不知道如何保留偏移量。
更糟糕的是:当视窗小于768px时,按钮和链接会换行。
同样,我注意到了bootstrap.css和min-width: 768px
的媒体查询,但我不知道如何将输入、按钮和文本完整地放在一起。
谢谢!