twitter-bootstrap - 如何在 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

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

战利品预览

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

Answer 2

我会研究引导选择https://github.com/silviomoreto/bootstrap-select

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

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