twitter-bootstrap - 如何使这个下拉搜索栏看起来更好？

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

你可以使用这个 boostrap 插件来启动selectbootstrap dropdown。 https://github.com/silviomoreto/bootstrap-select

Answer 2

这里没有利用现有的引导类，而只是添加了一个小的自定义。这至少是您可以用来解决问题的一种途径。请注意.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>

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