如何在垂直方向上获得两个form-group div?

时间:2016-09-18 03:04:55

标签: css twitter-bootstrap

如何让这两个div垂直对齐? 无论我做什么样的col-ms-sizing,两个输入组都不会在垂直线上对齐。 http://network-tools.com/nslook/

这是我的代码段:

<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> 

1 个答案:

答案 0 :(得分:0)

Bootstrap在你使用的col-xx-xx上有一个默认的填充.. 因此使用两次的col-md-6将比使用一次的col-md-12具有更多的填充。 你可以通过简单地添加一个额外的内联样式来调整填充。

在您的情况下使用padding-left:10px ..默认值为15 px

fiddle here