My Bootstrap V3 form has a mix of rows with two inputs and rows with one input, as per the designer's request.
Check out my fiddle here: https://jsfiddle.net/06qk4wh4/
<div class="form-group col-sm-12">
<label class="control-label col-sm-2">
Label 1
</label>
<div class="col-sm-10">
<input type="text" class="form-control col-sm-12" />
</div>
</div>
<div class="form-group col-sm-12 col-md-6">
<label class="control-label col-sm-2 col-md-4">
Label 2
</label>
<div class="col-sm-10 col-md-8">
<input type="text" class="form-control col-sm-12" />
</div>
</div>
<div class="form-group col-sm-12 col-md-6">
<label class="control-label col-sm-2 col-md-4">
Label 3
</label>
<div class="col-sm-10 col-md-8">
<input type="text" class="form-control col-sm-12" />
</div>
</div>
<div class="form-group col-md-12">
<label class="control-label col-sm-2">
Label 4
</label>
<div class="col-sm-10">
<input type="text" class="form-control col-sm-12" />
</div>
</div>
The issue arises in the row with two inputs, resulting in an alignment error (shown in red in the image below). When using col-sm-x, it works fine because it occupies the full width. However, when switching to col-md-x to display two inputs in one row, the "alignment error" occurs due to percentage calculation.
https://i.stack.imgur.com/0RKSp.png
Are there any simple solutions for this common problem? Your insights are much appreciated!