所以我正在一个网站上构建一个导航栏,其中包含一个搜索栏,以及一个分组按钮。它在桌面视图上工作正常,但是当我缩小到移动视图并且网站生成可折叠菜单时,搜索栏保持在左侧,但按钮向右浮动。当我使用围绕它的输入组-btn 类删除跨度时,我没有这个问题。
<form class="navbar-form navbar-left form-inline" role="search">
<div class="row">
<div class="input-group">
<input type="text" class="form-control" style="width: 250px;"/>
<span class='input-group-btn'>
<button type="button" class="btn btn-default" aria-label="Search">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</span>
</div>
</div>
</form>
包括图片 http://bit.ly/1G706rC
编辑:我解决了自己的问题!我只需要在跨度中添加一个pull-left
类
问题可能与要以 px 为单位修复的文本输入的宽度有关。尝试以百分比 (%) 为单位的相对度量,它可能会起作用,因为它会根据窗口大小调整大小。