css - 浏览器调整大小低于 767 像素时的 Bootstrap 样式问题

Question

我在下面有这段 Bootstrap 代码:

<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 类，然后为您的按钮设置 类向右拉，像这样:

<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>

...虽然它不一定在所有情况下看起来都很完美。您可能需要稍微调整一下，直到获得所需的结果。