当浏览器的大小调整为低于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

在引导程序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

编辑：据我所知，没有“ bootstrap”方法来分隔字段和按钮，始终将它们保持在同一行。 要解决此问题，您可以将输入的样式设置为width:95% （例如）和class 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>

...尽管不一定在每种情况下看起来都很完美。 您可能需要花些时间弄乱它，直到获得所需的结果。