Bootstrap 3 input group not working with select element

Question

I am trying to get an input-group styled properly in Bootstrap 3 with a drop-down selector, using this sample code:

<div class="form-group">
  <div class="input-group">
    <span class="input-group-btn">
      <select class="btn">
        <option>USD</option>
        <option>GBP</option>
        <option>ZAR</option>
      </select>
    </span>
    <input type="text" class="form-control">
    <span class="input-group-btn">
      <div class="btn btn-default" type="button">Button</div>
    </span>
  </div>
</div>

It works fine in Bootply (http://www.bootply.com/ZVSunDnXif):

but if I put it into my site (ASP.Net Web Forms) using exactly the same code, it breaks:

I wouldn't mind so much (in vanilla bootstrap it's only lacking the border around the select box), except that I'm using a Bootswatch themed version, which doesn't even align properly:

The css path to the input group is body > form > div #MainBody > div.row > div.col-md-9 > div.form-group.

If I remove the select element, it displays fine, so is there something wrong with how I've defined that?

Answer 1

try adding row class to the form-group div parent of the select element. My select element was breaking the form div and going into another row. Adding the row class kept it inside visually although it is still going outside the html form tag. I am going to post about that separately.