CSS Bootstrap 导航栏搜索图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9550738/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap navbar search icon
提问by jterrace
The bootstrap examples for the navbar search form have just a text box.
导航栏搜索表单的引导程序示例只有一个文本框。
I'd like to be able to add a search icon at the beginning, like Twitter does on their search box. How can I do this with bootstrap?
我希望能够在开头添加一个搜索图标，就像 Twitter 在他们的搜索框中所做的那样。我怎样才能用引导程序做到这一点？
Here's what I've tried so far but it's failing: http://jsfiddle.net/C4ZY3/3/
这是我到目前为止尝试过但失败的方法：http: //jsfiddle.net/C4ZY3/3/
回答by JeremyWeir
Here's how to use the :beforepseudo selector and glyphicons for Bootstrap 2.3.2instead of a background image on the input.
以下是如何在Bootstrap 2.3.2 中使用:before伪选择器和字形代替输入上的背景图像。
Here's a couple of simple examples: http://jsfiddle.net/qdGZy/
这里有几个简单的例子：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>
Update For Bootstrap 3.0.0更新Bootstrap 3.0.0
Here's an updated fiddle for bootstrap 3.0: http://jsfiddle.net/66Ynx/
这是引导程序 3.0 的更新小提琴：http: //jsfiddle.net/66Ynx/
回答by Alexey Ivanov
One of the way to do it is to add left padding to the field and add background image for the field.
一种方法是向字段添加左填充并为该字段添加背景图像。
See example: http://jsfiddle.net/hYAEQ/
参见示例：http: //jsfiddle.net/hYAEQ/
It's not exact way twitter.com do it, they used absolute position element above search field because they have all images in the single sprite, and can't easily use them as backgrounds, but it should do.
这不是 twitter.com 的确切方式，他们在搜索字段上方使用绝对位置元素，因为它们在单个精灵中包含所有图像，并且不能轻易将它们用作背景，但应该这样做。
I used inline image for a background to make it easier to post it to jsfiddle, but feel free to use normal links to images here.
我使用内联图像作为背景，以便更轻松地将其发布到 jsfiddle，但您可以在此处随意使用普通的图像链接。
EDIT: The way to do it using bootstrap sprite and additional container for icon http://jsfiddle.net/hYAEQ/2/
编辑：使用引导精灵和图标的附加容器来做到这一点的方法 http://jsfiddle.net/hYAEQ/2/
EDIT 2:
编辑2：
Fix for white bootstrap theme: http://jsfiddle.net/hYAEQ/273/
修复白色引导程序主题：http: //jsfiddle.net/hYAEQ/273/
EDIT 3:
编辑 3：
If you are using navbar-inverse (black navbar) you will want this minor tweak: http://jsfiddle.net/hYAEQ/410/
如果您使用的是导航栏反向（黑色导航栏），您将需要这个小调整：http: //jsfiddle.net/hYAEQ/410/
.navbar-search .search-query {
padding-left: 29px !important;
}
回答by UTCWebDev
Play this fiddle, I put some rosin on the bow for you: http://jsfiddle.net/pYRbm/
弹这个小提琴，我为你在弓上放了一些松香：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>
回答by Joseph Le Brech
You can also not touch the css at all by using prepending form inputs like so
您也不能通过使用这样的前置表单输入来触摸 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>
Note that whitespace between </span>and <input>will create a gap between the icon and the text box.
请注意，</span>和<input>之间的空白会在图标和文本框之间产生间隙。
回答by Dario
In bootstrap 3.x.x
在引导程序 3.xx 中
<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>
回答by Joel Rodgers
The new version 2.1.1 fixes the problem. It doesn't handle the case of the 15 pixel radius, so I went ahead and styled it accordingly. I also added navbar-inverse for fun.
新版本 2.1.1 修复了该问题。它不处理 15 像素半径的情况，所以我继续并相应地设置了样式。为了好玩，我还添加了 navbar-inverse。
A couple of caveats. The CSS can be better optimized, but recently I've been spoiled by less. Finally, there's an ever so slight, barely visible, left border to the left of the magnifying glass. I don't know exactly what's causing it, but it is likely the box shadow.
几个警告。CSS可以更好地优化，但最近我被更少的宠坏了。最后，放大镜左侧有一个非常轻微、几乎看不见的左边框。我不知道究竟是什么原因造成的，但很可能是盒子阴影。
Please feel free to fork and improve.
请随意分叉和改进。
回答by Flavio Wuensche
For those using Rails, my solution is not the most beautiful but works.
对于那些使用 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 %>
回答by Dan
Bit late to the party on this one ...
这个派对有点晚了......
I used the following to achieve the search input as an icon
我使用以下实现了将搜索输入作为图标
<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>
回答by rybitfa
You should change your approach. Use span.search-queryas an overlay - here you have the most important things:
你应该改变你的方法。使用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 */
