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

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

您可以使用此引导程序插件来启动引导程序select中的dropdown。 https://github.com/silviomoreto/bootstrap-select

Answer 2

这里没有利用现有的bootstrap类，只是添加了一个小的自定义。这至少是您可以用来解决问题的一条路线。请注意.dropForm类是如何添加到<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>

P.S。 - 无论你做什么，你都需要清除你的html标记<div class="btn-group"><：应该删除开角括号。