无处不在的二叔 无处不在的二叔 - 2 months ago 12
CSS Question

How can I get two form-group div align in vertically?

How can I get these two divs to align vertically?
No matter what kind of col-ms-sizing I do the two input groups will not align on the vertical line.
pls check the image here.

Here's my code snippet:

<div class="widget-body">
<form class="form-horizontal" id="form">
<input class="form-control" type="hidden" id="id">
<fieldset>
<div class="form-group col-md-6">
<label class="col-md-4 control-label"> fax</label>
<div class="col-md-8">
<input class="form-control" type="text" id="name" name="name">
</div>
</div>
<div class="form-group col-md-6">
<label class="col-md-4 control-label"> email</label>
<div class="col-md-8">
<input class="form-control" type="text" id="name" name="name">
</div>
</div>
<div class="form-group col-md-6">
<label class="col-md-4 control-label"> QQ</label>
<div class="col-md-8">
<input class="form-control" type="text" id="name" name="name">
</div>
</div>
<div class="form-group col-md-6">
<label class="col-md-4 control-label"> wechat</label>
<div class="col-md-8">
<input class="form-control" type="text" id="name" name="name">
</div>
</div>
<div class="form-group col-md-12">
<label class="col-md-2 control-label"> remark</label>
<div class="col-md-10 pull-left">
<textarea class="form-control" type="text" id="name" name="name"></textarea>
</div>
</div>
</fieldset>
</form>
</div>

Answer

Bootstrap has a default padding on the col-xx-xx that you use.. so col-md-6 used twice will have more padding than col-md-12 used once.. you could adjust the padding by simply adding an additional inline style.

Just use padding-left:10px in your case.. the default is 15 px

fiddle here