导航栏搜索表单的引导示例只有一个文本框。
我希望能够在开头添加一个搜索图标，就像 Twitter 在他们的搜索框中所做的那样。如何使用引导程序做到这一点？
这是我迄今为止尝试过的，但失败了： http://jsfiddle.net/C4ZY3/3/
【问题讨论】：
标签： css twitter-bootstrap
下面介绍了如何在 Bootstrap 2.3.2 中使用 :before 伪选择器和字形图标，而不是在输入中使用背景图像。
这里有几个简单的例子：http://jsfiddle.net/qdGZy/
<style type="text/css">
input.search-query {
padding-left:26px;
}
form.form-search {
position: relative;
}
form.form-search:before {
content:'';
display: block;
width: 14px;
height: 14px;
background-image: url(http://getbootstrap.com/2.3.2/assets/img/glyphicons-halflings.png);
background-position: -48px 0;
position: absolute;
top:8px;
left:8px;
opacity: .5;
z-index: 1000;
}
</style>
<form class="form-search form-inline">
<input type="text" class="search-query" placeholder="Search..." />
</form>
这是 bootstrap 3.0 的更新小提琴：http://jsfiddle.net/66Ynx/
【讨论】：
其中一种方法是向字段添加左填充并为字段添加背景图像。
查看示例：http://jsfiddle.net/hYAEQ/
这不是 twitter.com 这样做的确切方式，他们在搜索字段上方使用绝对位置元素，因为他们在单个精灵中拥有所有图像，并且不能轻易地将它们用作背景，但它应该这样做。
我使用内联图像作为背景，以便更容易将其发布到 jsfiddle，但请随意在此处使用指向图像的普通链接。
编辑：使用引导精灵和图标的附加容器的方法 http://jsfiddle.net/hYAEQ/2/
编辑 2：
修复白色引导主题：http://jsfiddle.net/hYAEQ/273/
编辑 3：
如果您使用的是 navbar-inverse（黑色导航栏），您将需要这个小调整：http://jsfiddle.net/hYAEQ/410/
.navbar-search .search-query {
padding-left: 29px !important;
}
【讨论】：
弹奏这把小提琴，我在琴弓上放了些松香给你： http://jsfiddle.net/pYRbm/
.fornav {
position:relative;
margin-left:-22px;
top:-3px;
z-index:2;
}
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<form class="navbar-search">
<div class="input-append">
<input type="text" class="search-query span2" placeholder="Search…"><span class="fornav"><i class="icon-search"></i></span>
</div>
</form>
</div>
</div>
</div>
【讨论】：
left:-22px 而不是 margin-left:-22px; 并将输入和跨度标签包装在 <nobr> 中将让您在有限宽度区域中使用它，而无需将图标放在新行上。+1 为答案。
你也可以通过像这样使用预先输入的表单输入来完全不触摸 css
<form class="navbar-search">
<div class="input-prepend">
<span class="add-on"><i class="icon-search"></i></span><input name="url" type="text" class="span2" placeholder="Page Url">
</div>
</form>
请注意，</span> 和 <input> 之间的空格会在图标和文本框之间产生间隙。
【讨论】：
在引导程序 3.x.x 中
<div class="input-group">
<input type="text" class="form-control" id="search">
<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
</div>
【讨论】：
新版本 2.1.1 修复了该问题。它不处理 15 像素半径的情况，所以我继续进行相应的样式设置。为了好玩，我还添加了 navbar-inverse。
几个注意事项。 CSS可以更好的优化，但是最近被less宠坏了。最后，放大镜左侧有一个非常轻微、几乎看不见的左边框。我不知道到底是什么原因造成的，但很可能是盒子阴影。
请随时 fork 和改进。
【讨论】：
对于那些使用 Rails 的人来说，我的解决方案不是最漂亮但很有效。
<%= form_tag PATH_TO_MODEL, :method => 'get', :class => "navbar-search" do %>
<%= text_field_tag :search, params[:search], :class => "search-query",
:style => "padding-left:29px" %>
<div class="icon-search" style="position:absolute;top:7px;left:11px;"></div>
<% end %>
【讨论】：
这个派对有点晚了......
我用下面的方法实现了搜索输入为图标
<div class="input-append">
<input id="appendedInputButton" class="span6" type="text" placeholder="Search...">
<button class="btn" type="button"><i class="icon-search"></i></button>
</div>
【讨论】：
你应该改变你的方法。使用 span.search-query 作为覆盖 - 这里有最重要的东西：
.navbar-search { position: relative } /* wrapper */
.search-query { position: absolute; left: 0; top: 0; z-index: 2; width: x } /* icon */
.span3 { position: relative; z-index: 1; padding-left: x } /* input */
【讨论】：