title: How to make input-appending drop-down list in Bootstrap
body: <p>I have the following page:</p>
  
  <p><img src="https://i.stack.imgur.com/XBsNU.jpg" alt="enter image description here"></p>
  
  <p>Where my code for the form looks like:</p>
  
  <pre><code>    &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="offset3 span3"&gt;
  
        &lt;form class="form-horizontal" id="inputForm"&gt;
        &lt;div class="control-group"&gt;
          &lt;label class="control-label" for="volume"&gt;Beer Volume&lt;/label&gt;
          &lt;div class="controls"&gt;
            &lt;div class="input-append"&gt;
              &lt;input type="text" id="volume" placeholder="i.e. 16"&gt;
              &lt;span class="add-on"&gt;oz&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="control-group"&gt;
          &lt;label class="control-label" for="alcPercent"&gt;Alcohol&lt;/label&gt;
          &lt;div class="controls"&gt;
            &lt;div class="input-append"&gt;
              &lt;input type="text" id="alcPercent" placeholder="i.e. 6.3"&gt;
              &lt;span class="add-on"&gt;%&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="control-group"&gt;
          &lt;div class="controls"&gt;
            &lt;button class="btn-large" type="button" value="CONVERT" onclick="onSubmit()"&gt;CONVERT&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>I'm trying to create the page so that "oz" is actually a drop-down menu, where the user can choose from "oz", "centiliters", "liters", etc.  Is there a way to do this cleanly in Bootstrap?  I see there's a "button dropdown": <a href="http://twitter.github.io/bootstrap/base-css.html#forms" rel="nofollow noreferrer">http://twitter.github.io/bootstrap/base-css.html#forms</a> , but when I copied in that code, I couldn't get any of the dropdown choices working.</p>
  
  <p>How can I do this?</p>