css – Bootstrap导航栏搜索图标

前端之家收集整理的这篇文章主要介绍了css – Bootstrap导航栏搜索图标前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
导航栏搜索表单的引导示例只有一个文本框。

我想要能够在开头添加一个搜索图标,就像Twitter在他们的搜索框上。我怎么能这样用bootstrap?

这里是我试过迄今为止,但它的失败:
http://jsfiddle.net/C4ZY3/3/

解决方法

执行此操作的一种方法是将left padding添加到字段,并为字段添加背景图像。

参见示例:http://jsfiddle.net/hYAEQ/

这不是twitter.com的确切方式,他们使用搜索字段之上的绝对位置元素,因为他们有所有的图像在单个精灵,并不能轻易地使用它们作为背景,但它应该做。

我使用内联图像作为背景,使其更容易发布到jsfiddle,但随时使用正常链接到图像在这里。

编辑:使用引导精灵和额外的容器图标的方式
http://jsfiddle.net/hYAEQ/2/

编辑2:

修正白色bootstrap主题http://jsfiddle.net/hYAEQ/273/

编辑3:

如果你使用navbar-inverse(黑色navbar),你将需要这个小调整:http://jsfiddle.net/hYAEQ/410/

.navbar-search .search-query {
    padding-left: 29px !important;
}

猜你在找的CSS相关文章