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

<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像素以下时,漂亮的漂亮搜索栏看起来像这样:

在此处输入图片说明

我想要搜索字段右侧的搜索图标,我该怎么做?

===============>>#1 票数: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>

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

  ask by allencoded translate from so

未解决问题?本站智能推荐:

1回复

浏览器调整引导大小时,导航栏低于徽标

调整屏幕分辨率大小时,引导程序的右上固定导航栏位于徽标下方。 我将图片上传到https://www.imageupload.co.uk/image/5bDD 请让我知道如何解决这个问题... 谢谢
1回复

根据Web浏览器的大小调整对象的大小

我在使网络浏览器的尺寸至少为768px时遇到问题。 如果大小大于768像素,则应在cshtml的VS中将字段大小应用于指定为200像素 CSS代码适用于CShtml 当我执行css代码时,我检索到一条消息,指出“名称'media'在当前上下文中不存在”。 下面的代码可在W3C
1回复

jQuery:根据浏览器大小调整图像大小

我正在尝试使用JQuery根据浏览器的大小/大小调整图像大小。 我希望图像按比例缩放并保持其比例,而不会被截断。 我正在使用Bootstrap,我的HTML如下所示: 该图像位于.img-container div中,而我的JQuery如下所示: 如您所见,我正在调整
1回复

跨浏览器DataTable大小调整不正确

最近我无法让我的DataTables占据他们div的100%宽度。 我正在使用Bootstrap和jQuery。 你们任何人都有任何想法? HTML CSS jQuery的 链接/脚本: Safari Image 谷歌Chrome图像
1回复

调整浏览器大小或在其他设备上时,Bootstrap没有响应

我建立了一个简单的引导网站,但是当调整浏览器的大小或在其他设备上查看浏览器时,却无法响应。 我已经为“ lg,sm,md,xs”等不同的大小添加了大小,但是仍然无法正常工作。 问题之一是我有4个视频div,其宽度似乎比顶部的视频稍长。 这是该问题的图片 这是调整浏览器大小时的网站摘要
1回复

图片的大小不会调整到低于特定浏览器的宽度

网站可以在这里找到 。 完整的CSS可以在这里访问。 问题是图块中的图像仅针对浏览器的宽度> 512px调整大小。 对于每行2张图像,图像不会缩小到240像素以下;对于每行1张图像,图像应保留其默认宽度-480像素。 尽管设置了它,它仍然发生: 我正在使用Bootstr
2回复

调整浏览器大小时的bootstrap scrollspy错误

您好Stackoverflow引导程序! 我看不到曾有人问过这个问题,我很感兴趣看到结果。 如何复制错误: 打开页面:( 我当前的URL测试此错误) http://dnwebdev.com/dev/ 将页面大小调整为平板电脑 使用导航栏 (请注意,网
1回复

Bootstrap按钮移动大小调整问题

我在下面有两个Bootstrap按钮: 桌面检视 页面左侧是“编辑报告”按钮,页面右侧是“提交报告”按钮。 它在普通桌面视图上可以正常工作,但移动视图存在问题。 遇到如下问题: 和 谷歌周围,但没有帮助。 如何使这两个按钮位于顶部和底部,并在移动
2回复

调整浏览器大小时Bootstrap响应不起作用

我是引导程序的新手,我需要将静态页面转换为响应引导程序,宽度为980像素。 因此我根据设计创建了启动列,并使用CSS校正将每个div放入列中。 在普通视图中,一切都很好,但是当我调整窗口大小时,它显示如下。 http://imgur.com/zOnLh3a 我从未将非响应式转换为
2回复

select2引导程序大小调整问题

我正在尝试在带有引导程序的html中使用多个select2选择表单。 但我在调整大小时遇到​​问题,select2框不适用于网格,而且还会使下一项的大小变乱。 HTML JS 完整代码在这里http://www.codeply.com/go/Ly1UHW2HT2