Checkbox grid alignment inside well for bootstrap - twitter-bootstrap-3

Question

I can't seem to get my checkboxes to align with the labels and select options inside a well using bootstrap 3.3.5. My code is:
<div class="well">
<div class="row">
<div class="col-md-6">
<label class="control-label">Checkboxes</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="checkbox">
<input type="checkbox" id="1">1
</div>
<div class="checkbox">
<input type="checkbox" id="2">2
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Select</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<select id="2" class="form_control">
<option value="A">A</option>
<option value="B">B</option>
</select>
</div>
</div>
</div>
Fiddle illustrating misalignment:
https://jsfiddle.net/dwzvsoax/
I'm pretty new to bootstrap, so I'm probably doing something dumb! Thank you in advance.

Answer 1

Wrap your form elements and labels together with a .form-group element.
jsFiddle
Also, you should read the Boostrap Documentation on Forms
<div class="well">
<div class="form-group">
<label>Check Boxes</label>
<div class="checkbox">
<label>
<input type="checkbox" /> 1
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" /> 2
</label>
</div>
</div>
<div class="form-group">
<label>select</label>
<select id="2" class="form-control">
<option value="A">A</option>
<option value="B">B</option>
</select>
</div>
</div>

Answer 2

you could add in to the .checkbox class an attribute margin-left:22px; in the css file and that should give you the desired effect. If it's just on one page though, just add it in style tags at the top of the page, as it may not be desirable everywhere.
I updated your fiddle