Bootstrap-右侧带有按钮的下拉列表，但通过表单控件使其宽度为100％

Question

I'm having an issue with getting my 'Create' button to be right of my dropdownlist. Because the dropdown has a class form-control it makes the width 100% of the space available and so my button wraps underneath. If I remove the class the button sits next to the dropdown.

http://jsfiddle.net/2y39drrh/

Rather than writing a CSS class to override form-control's width, is there a better way? The forms.less file does say to use form-control with <select> elements...

<div class="form-group">
  <label class="control-label col-md-1" for="Note_NoteTypeId">Type</label>
  <div class="col-md-11">
    <select class="form-control" data-val="true"> 
      <option value="">Select...</option>
      <option value="3">Option1</option>
      <option value="2">Option2</option>
      <option value="1">Option3</option>
    </select>
    <button class="btn btn-success" id="btnCreate" type="button">Create</button>
  </div>
</div>
<div class="form-group">
  <span class="field-validation-valid text-danger"></span>
</div>  

Answer 1

I guess you want something like this?

Example 1

 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <div class="input-group"> <select class="form-control" data-val="true"> <option value="">Select...</option> <option value="3">Option1</option> <option value="2">Option2</option> <option value="1">Option3</option> </select> <span class="input-group-btn"> <button class="btn btn-success" id="btnCreate" type="button">Create</button> </span> </div> <div class="form-group"> <span class="field-validation-valid text-danger"></span> </div> 

Example 2

<div class="form-inline">
<select class="form-control" data-val="true"> 
      <option value="">Select...</option>
      <option value="3">Option1</option>
      <option value="2">Option2</option>
      <option value="1">Option3</option>
    </select>
<input type="button" class="btn btn-success" value="Create">
</div>

Answer 2

I'm not sure why, the code I'm inserting to this post works weird on JSFiddle and SO editor. But it works fine on codepen.io

 body { max-width: 800px; margin: 0 auto; padding: 2em; } 

 <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-md-6"> <select id="vehicle" name="vehicle" class="form-control" data-dropupauto="false"> <option value=""> 1 </option> <option value=""> 2 </option> <option value=""> 3 </option> </select> </div> <div class="col-md-6"> <button class="btn btn-success" id="btnCreate" type="button">Create</button> </div> </div> 

See the example in full page. I believe that's the reason why SO editor and JSFiddle shows different results.