bootstrap表单排版垂直距离问题

今天在用bootstrap做一个表单的时候发现垂直距离靠太近了,不好看。当窗口缩小或者移动端的时候都是正常的,距离很合理。就是在PC端和大一点的视窗的时候,布局很紧密,看起来头痛!!

调试了几次发现是缺少了一个class属性【form-horizontal】,这个属性自动帮布局好,如果没有自带的属性自己写css自定义就比较麻烦,表单一旦多起来就比较耗时间了。

对比图:


图一:没有距离比较紧密,不怎么喜欢


图二:有距离感觉比较清晰点,体验更好


完整代码如下:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-success">
                <div class="panel-header text-center">
                    <h2>用户登录</h2>
                </div>
                <div class="panel-body">
                    <form class="form-horizontal" action="<?php U('a=uLogin')?>" method="post" id="check-form" >
                        <div class="form-group divp">
                            <label class="col-sm-3 col-md-3 control-label">登录账号:</label>
                            <div class="col-sm-9 col-md-9">
                                <input type="text" name="name" id="name" class="form-control" placeholder="请输入登录账号">
                            </div>
                        </div>
                        <div class="clear" style="margin-top: 10px"></div>
                        <div class="form-group divp">
                            <label class="col-sm-3 col-md-3 control-label">登录密码:</label>
                            <div class="col-sm-9 col-md-9">
                                <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
                            </div>
                        </div>
                        <div class="form-group divp">
                            <label class="col-sm-3 col-md-3 control-label">验证码:</label>
                            <div class="col-sm-3 col-md-3">
                                <input type="text" name="code" autocomplete="off" id="code" class="form-control" placeholder="请输入验证码">
                            </div>
                            <div class="col-sm-6 text-left">
                                <img src="<?php echo URL_WEB?>source/comm/qrcode/authcode.php" alt="..." id="imgCode">
                            </div>
                        </div>
                        <div class="form-group divp">
                            <div class="col-sm-12 text-center ">
                                <a title="提交" class="btn btn-success btn-lg " style="margin-right: 10px" onclick="login()">登录</a>
                                <a title="返回" href="<?php toPage('newPwd')?>" class=" "  >忘记密码</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>


评论/留言