Alternating number of inputs per row in Bootstrap V3 - html

Question

I have a form made in Bootstrap V3. The designer wants some rows to contain two inputs, while other rows contain only one.
I've made a 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 problem is that in the row with two inputs I get an alignment error (shown in red in the image below). It works great in col-sm-x, because then it uses the full width. But in col-md-x I try to render two inputs in one row, and I get an "alignment error" because of the percentage calculation.
Is there a simple solution for this? It must be a pretty common problem?

Answer 1

You can try this code.
It seems to fix your problem. I just add a row after your div(col-sm-12)
<div class="form-group col-sm-12">
<div class="row">
<label class="control-label col-sm-2">
Label 1
</label>
<div class="col-sm-10">
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="form-group col-sm-12 col-md-6">
<div class="row">
<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" />
</div>
</div>
</div>
<div class="form-group col-sm-12 col-md-6">
<div class="row">
<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" />
</div>
</div>
</div>
<div class="form-group col-md-12">
<div class="row">
<label class="control-label col-sm-2">
Label 4
</label>
<div class="col-sm-10">
<input type="text" class="form-control" />
</div>
</div>
</div>
Hope this is the solution :)
Richie