inline rows within Bootstrap form - html

Question

I'm trying to build a horizontal form with Bootstrap which has a row of elements on the right hand side of the form like this:
I am having difficulty getting the checkbox, label and input element to sit on a row nicely like that. This is my current attempt. I've added 'checkbox-inline' which gets things on a line, but I can't get the label to move to the middle of the line. Also, the checkboxes are much larger for some reason. Can anyone offer any hints?
The code from the Codepen link:
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="input_staff">Staff Member and Percent Share *</label>
<div class="col-sm-5">
<label class="checkbox-inline col-sm-3">
<input class="form-control" type="checkbox" name="input_staff[]" value="39">BH
</label>
<div class="input-group col-sm-3">
<input class="form-control" type="number" id="input_staff_percent_39" min="0" max="100" value="0" disabled="">
<span class="input-group-addon">%</span>
</div>
<label class="checkbox-inline col-sm-3" for="">
<input class="form-control" type="checkbox" name="input_staff[]" value="11">CC
</label>
<div class="input-group col-sm-3">
<input class="form-control" type="number" id="input_staff_percent_11" min="0" max="100" value="0" disabled="">
<span class="input-group-addon">%</span>
</div>
</div>
</div>
</form>

Answer 1

here is a small example for your checkboxes
one of your mistakes: Don't use col with other elements, like labels. Preferably you use a div for cols, just use it for cols.
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
</div>
</form>
</div>

Answer 2

I finally got it working by using the 'form-inline' class for each row. This answer made me go back and look at form-inline again.
Here is my sample code:
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="input_staff">Staff Member and Percent Share *</label>
<div class="col-sm-10">
<div class="form-inline">
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="input_staff[]" value="39">BH
</label>
</div>
<div class="input-group col-sm-9">
<input class="form-control" type="number" id="input_staff_percent_39" min="0" max="100" value="0" disabled="">
<span class="input-group-addon">%</span>
</div>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="input_staff[]" value="11">CC
</label>
</div>
<div class="input-group col-sm-9">
<input class="form-control" type="number" id="input_staff_percent_11" min="0" max="100" value="0" disabled="">
<span class="input-group-addon">%</span>
</div>
</div>
</div>
</div>
</div>
</form>
Here is a codepen with the code above showing what it looks like.