文本输入内的Twitter Bootstrap下拉列表

Question

您好我想使用Twitter Bootstrap构建表单，文本输入的下拉菜单 。像这样 - ＆gt;

我只是以这种方式管理

      <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>

但是在这种情况下，droptdown不在文本输入中。是否可以使用Twitter Bootstrap在文本输入中放入下拉列表？

Answer 1

查看bootstrap文档的“表单”部分：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类。