带组合框的 Bootstrap 导航栏搜索字段(或任何下拉菜单) [英] Bootstrap navigation bar search field with combobox ( or any drop down)

问题描述

我正在使用 Bootstrap v2.0.2.下面是我为我的网站构建的导航栏

I am using Bootstrap v2.0.2 . Below is the navigation bar I am building for my website

搜索由三个字段组成

1) Combo box or any drop down 
2) search input text field 
3) Search icon ( click-able ) 

.这是上面屏幕截图的小提琴(请在firefox中打开)

. Here is the fiddle for above screen shot (Please open it in firefox)

http://jsfiddle.net/krg78/1/

有什么办法可以让组合框看起来像文本输入的一部分(现在两个看起来不同的字段)并代替 Search2 显示可以点击的搜索图标(如在 Facebook 中)?

Is there any way I can make combobox looks like part of text input ( now two looks different fields) and in place of Search2 showing Search icon which can be click-able ( like in facebook) ?

如果我使用下面的行，我只是用空白字段代替图标.

If I use below lines , I am just getting blank field in place of icon .

<span class='add-on' style="float: right"> <i class="icon-search"></i> </span> 

谢谢大家

推荐答案

检查 http://jsfiddle.net/krg78/2/

您可以通过添加相对于组合框的位置并将其移动到输入中来使组合框看起来像文本输入的一部分:

You can make combobox looks like part of text input by adding position relative to combobox and moving it on into input:

.navbar-search select {
  position: relative;
  left: 84px;
}

.navbar-search input {
  padding-left: 84px;
}

这篇关于带组合框的 Bootstrap 导航栏搜索字段(或任何下拉菜单)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！