我正在使用bootstrap 3。 我想让登录表格变小,并在输入之间改变大小,因为现在它们太近了。
这是我的代码
<div class="container">
<div class="row">
<div class="span2 well col-lg-5">
<legend>Please Sign In</legend>
<!--<div class="alert alert-danger alert-dismissable">
<span class="glyphicon glyphicon-warning-sign"></span>
<button type="button" class="close" data-dismiss="alert">×</button>
Incorrect Username or Password!
</div>-->
<form method="POST" action="" accept-charset="UTF-8">
<div class="input-group input-group-sm">
<span class="glyphicon glyphicon-user input-group-addon"></span>
<input type="text" id="username" class="form-control input-medium" name="username" placeholder="Username" value="${userName}">
</div>
<div class="input-group input-group-sm">
<span class="glyphicon glyphicon-lock input-group-addon"></span>
<input type="password" id="password" class="form-control" name="password" placeholder="Password" value="${pass}">
</div>
<label class="checkbox">
<input type="checkbox" name="remember" value="1"> Remember Me
</label>
<button type="submit" name="submit" class="btn btn-info btn-block">Sign in</button>
</form>
</div>
</div>
</div>
怎么做?
表格
答案 0 :(得分:0)
使用网格系统,无论如何都可以使它们更小。见下文。对于它们之间的空格Twitter Bootstrap - add top space between rows。玩得开心!
#import "AppDelegate.h"
#import <Parse/Parse.h>
#import "DefaultSettingsViewController.h"
#import <ParseFacebookUtils/PFFacebookUtils.h>
#import <FBSDKCoreKit/FBSDKCoreKit.h>
#import <FBSDKLoginKit/FBSDKLoginKit.h>
#import "Branch.h"
#import <ParseFacebookUtilsV4/PFFacebookUtils.h>
答案 1 :(得分:0)
如果你想约束整个表单,你可以设置一些像这样的CSS规则,这也可以让你在屏幕上移动表单位置或在整个表单周围添加填充(或者它的一部分:IE顶部/底部)。
您可以使用此类规则更改字段#loginForm .input-group
之间的边距。
.formCenter {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.formCenter.formChange {
min-width: 300px;
max-width: 500px;
padding: 50px;
}
#loginForm .input-group {
margin: 20px 0;
}
@media (max-width : 768px) {
.formCenter.formChange {
width: 100%;
}
}
这是一个工作示例:
.formCenter {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.formCenter.formChange {
min-width: 300px;
max-width: 500px;
padding: 50px;
}
#loginForm .input-group {
margin: 20px 0;
}
@media (max-width: 768px) {
.formCenter.formChange {
width: 100%;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="formCenter formChange">
<div class="col-sm-12 col-md-10 col-md-offset-1 well">
<legend>Please Sign In</legend>
<form method="POST" action="" accept-charset="UTF-8" id="loginForm">
<div class="form-group input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input class="form-control" type="text" name='username' id="username" placeholder="Username" />
</div>
<div class="form-group input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input class="form-control" type="password" id="password" name='password' placeholder="Password" />
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember" value="1">Remember Me</label>
</div>
<div class="form-group">
<button type="button" class="btn btn-info btn-block">Sign In</button>
</div>
</form>
</div>
</div>
</div>
</div>