今天在用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>