如何让此下拉搜索栏看起来更好？

Question

做了一个下拉按钮，当点击时显示一个搜索栏，但它不是很好看，我可以使用什么类来使它更好？这是它目前的样子：

<li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Search<b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <form> 
      <div class="input-prepend"> 
      <div class="btn-group">< 
      <button class="btn" tabindex="-1">Search</button> 
      <select class="btn dropdown-toggle" style="width: 140px;"> 
      <option>Suncor</option> 
      <option>Syncrude</option> 
      <option>Albian Sands</option> 
      </select> 
      </div> 
      <input type="text"> 
      </div> 
      </form> 
      </ul> 
      </li> 
      </ul> 

Answer 1

不利用现有的自举类在这里，但只是添加少量的定制。至少有一条路线可以用来解决您的问题。请注意0​​课程是如何添加到<form>的。

http://jsfiddle.net/fhVnJ/3/

CSS

.w140 { 
    width: 135px;  
} 

.dropForm { 
    margin: 0; 
    padding: 15px 12px 10px 12px;  
} 

HTML

<div class="navbar"> 
    <div class="navbar-inner"> 
     <ul class="nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">Link</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Search<b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
        <form class="dropForm"> 
         <div class="input-prepend"> 
          <div class="btn-group"> 
           <button class="btn" tabindex="-1">Search</button> 
           <select class="w140"> 
            <option>Suncor</option> 
            <option>Syncrude</option> 
            <option>Albian Sands</option> 
           </select> 
          </div> 
          <input type="text" /> 
         </div> 
        </form> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div> 

附： - 无论你做什么，你都需要清理你的html标记，如果你有<div class="btn-group"><：应该删除开角尖括号。

Answer 2

你可以使用这个boostrap插件将select转换成引导程序dropdown。 https://github.com/silviomoreto/bootstrap-select