如何在Bootstrap中创建输入附加下拉列表

Question

我有以下页面：

我的表单代码如下所示：

    <div class="container">
  <div class="row">
    <div class="offset3 span3">

      <form class="form-horizontal" id="inputForm">
      <div class="control-group">
        <label class="control-label" for="volume">Beer Volume</label>
        <div class="controls">
          <div class="input-append">
            <input type="text" id="volume" placeholder="i.e. 16">
            <span class="add-on">oz</span>
          </div>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="alcPercent">Alcohol</label>
        <div class="controls">
          <div class="input-append">
            <input type="text" id="alcPercent" placeholder="i.e. 6.3">
            <span class="add-on">%</span>
          </div>
        </div>
      </div>
      <div class="control-group">
        <div class="controls">
          <button class="btn-large" type="button" value="CONVERT" onclick="onSubmit()">CONVERT</button>
        </div>
    </div>
  </form>

我正在尝试创建页面，以便“oz”实际上是一个下拉菜单，用户可以选择“oz”，“centiliters”，“liters”等。有没有办法干净地完成这个引导？我看到有一个“按钮下拉列表”：http://twitter.github.io/bootstrap/base-css.html#forms，但是当我复制该代码时，我无法获得任何下拉选项。

我怎样才能做到这一点？

Answer 1

我会调查Bootstrap Select https://github.com/silviomoreto/bootstrap-select

通过一些CSS / jQuery自定义，它应该适合你...

关于Bootply的工作示例：http://bootply.com/60822

Answer 2

同样的问题在这里讨厌用js或其他东西修复基础知识。这是我的修复:) :)

bootypreview

<div class="form-group">
    <label for="input" class="col-sm-2 control-label">Budget</label>
    <div class="col-sm-10">
        <div class="input-group">
            <select class="form-control" style="float: left;width: initial;">
                <option>&euro;</option>
                <option>&dollar;</option>
            </select>
            <input type="text" class="form-control" style="float: left;width: initial;">
            <select class="form-control" style="float: left;width: initial;">
                <option>per job</option>
                <option>per hour</option>
            </select>
        </div>
    </div>
</div>