Twitter bootstrap 如何在引导中创建输入附加下拉列表

我有以下一页：

其中，我的表单代码如下所示：

    <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”、“厘”、“升”等中进行选择。有没有一种方法可以在引导中干净地执行此操作？我看到有一个“按钮下拉列表”：，但当我复制代码时，我无法让任何下拉列表选项工作

---

我如何才能做到这一点？

我会查看引导选择

通过一些CSS/jQuery定制，它应该适合您

---

关于Bootply的工作示例：

这里也有同样的问题。讨厌用js之类的东西来修复基本问题。 这是我的解决方案：）：）

预算
&欧元；
&美元；
每项工作
每小时

您需要模拟

效果。你尝试应用的那些下拉菜单只是简单的下拉菜单。我对web开发/引导有点在行。你能解释一下你所说的模拟选择是什么意思吗？

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