twitter-bootstrap - 文本输入中的 Twitter Bootstrap 下拉菜单

Question

嗨，我想使用 Twitter Bootstrap 和文本输入内的下拉菜单构建表单。像这样->

我只用这种方式做到了

      <div class="input-append">
    <form method="get" action="/option" class="navbar-search" id="searchForm">
      <input type="text" size="16" placeholder="Search string" name="query">
      <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle searchMain" style="width: 150 px;"><span>Option 1</span> <b class="caret"></b></button>
      <ul class="dropdown-menu" id="search-dropdown" style="left: 220px;">
        <li><a href="#" id="option-1">Option 1</a></li>
        <li><a href="#" id="option-2">Option 2</a></li>
        <li><a href="#" id="option-3">Option 3</a></li>
      </ul>
      <button type="submit" class="btn btn-primary"><i class="icon-white icon-search"></i></button>
    </form>
  </div>

但在这种情况下，下拉菜单不在文本输入范围内。是否可以使用 Twitter Bootstrap 在文本输入中放置下拉菜单？

Answer 1

查看引导文档的表单部分：http: //twitter.github.com/bootstrap/base-css.html#forms

您的标记将如下所示：

<div class="input-append">
  <input class="span2" id="appendedDropdownButton" type="text">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      Action
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
</div>

这里的关键是input-append类。