twitter-bootstrap - 带有组合框（或任何下拉菜单）的引导导航栏搜索字段

Question

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

搜索包含三个字段

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

. 这是上面屏幕截图的小提琴（请在Firefox中打开它）

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

有什么方法可以让组合框看起来像文本输入的一部分（现在两个看起来不同的字段）并代替 Search2 显示可以点击的搜索图标（就像在 facebook 中一样）？

如果我使用下面的行，我只是用空白字段代替 icon 。

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

谢谢你们

Answer 1

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

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

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

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