当浏览器重新调整为767像素以下时，Bootstrap样式问题

Question

我在下面有一些引导代码：

<form class="navbar-form ">
                    <div class="form-group">
                        <input type="text" class="form-control"  placeholder="Search" name="query" ng-model="query">
                    </div>
                    <button type="button" class="btn btn-default" ng-click="queryresult()"><span class="glyphicon glyphicon-search"></span></button>
                </form>

但我的问题是，当我将浏览器调整到767像素宽以下时，漂亮漂亮的搜索栏看起来就像这样：

我想搜索字段右侧的搜索图标我该怎么做？

Answer 1

在bootstrap 3中，以下内容应该有效（我建议您按原样粘贴下面的代码，因为我更改了一些类名）：

<div class="input-group">
    <input type="text" class="form-control" placeholder="Search" name="query" ng-model="query">
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="queryresult()">
            <span class="glyphicon glyphicon-search"></span>
        </button>
    </span>
</div>

Bootstrap的原始资料来源：http://getbootstrap.com/components/#input-groups-buttons

已编辑：据我所知，没有“引导”方式来分隔字段和按钮，使它们始终保持在同一行。要解决这个问题，您可以将输入的样式设置为width:95%（例如）和类pull-left，然后将按钮设为pull-right类，如下所示：

<input type="text" class="form-control" placeholder="Search" name="query" ng-model="query" style="width:95%; float:left">

...

<button type="button" class="btn btn-default" ng-click="queryresult()"><span class="glyphicon glyphicon-search" style="float:right"></span></button>

......虽然在每种情况下都不一定会看起来很完美。你可能需要稍微改变它，直到你得到所需的结果。