错误对齐的引导程序表单元素
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了错误对齐的引导程序表单元素相关的知识，希望对你有一定的参考价值。
我有以下bootstrap 3添加用户表单。我已经简化了这个问题，但问题是内部密码表单元素没有正确对齐：
<div class="form-row">
<div class="col-xs-12">
<div class="spacer-sml"></div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="form-group">
<label for="username" class="col-sm-6 control-label">
Username:
</label>
<div class="col-sm-4">
<input type="text" id="username" name="username" autofocus="autofocus" data-toggle="tooltip" required="" pattern="[A-z0-9À-ž]{1,}" class="full-length-field " title="Usernames must be at least 1 character with no spaces or special characters" value="">
</div>
<div class="col-sm-2">
<i class="fa fa-info-circle text-info fa-1-5-font-size more-info" aria-hidden="true" title="Please enter a unique username. Usernames must be at least 1 character with no spaces or special characters." data-more-info="Please enter a unique username. Usernames must be at least 1 character with no spaces or special characters.">
</i>
</div>
</div>
<div class="form-group">
<label for="first-name" class="col-sm-6 control-label">
First name:
</label>
<div class="col-sm-4">
<input type="text" id="firstname" name="firstname" data-toggle="tooltip" required="" pattern="[A-zÀ-ž][A-zÀ-žs,.'-]{1,}" class="full-length-field " title="First name must be at least 2 characters" value="">
</div>
<div class="col-sm-2">
<i class="fa fa-info-circle text-info fa-1-5-font-size more-info" aria-hidden="true" title="Please enter the users first name. The first name must be at least 2 characters long." data-more-info="Please enter the users first name. The first name must be at least 2 characters long.">
</i>
</div>
</div>
<div class="form-group">
<label for="last-name" class="col-sm-6 control-label">
Last name:
</label>
<div class="col-sm-4">
<input type="text" id="lastname" name="lastname" data-toggle="tooltip" required="" pattern="[A-zÀ-ž][A-zÀ-žs,.'-]{1,}" class="full-length-field " title="Last name must be at least 2 characters" value="">
</div>
<div class="col-sm-2">
<i class="fa fa-info-circle text-info fa-1-5-font-size more-info" aria-hidden="true" title="Please enter the users last name. The last name must be at least 2 characters long." data-more-info="Please enter the users last name. The last name must be at least 2 characters long.">
</i>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-6 control-label">
Email:
</label>
<div class="col-sm-4">
<input type="text" id="email" name="email" data-toggle="tooltip" class="full-length-field " title="Users email address" value="" required="" pattern="[^@]+@[^@]+.[a-zA-Z0-9]{2,}">
</div>
<div class="col-sm-2">
<i class="fa fa-info-circle text-info fa-1-5-font-size more-info" aria-hidden="true" title="Please enter the users email address." data-more-info="Please enter the users email address.">
</i>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="form-group">
<div class="col-sm-12">
<label for="profile-type">
Additional Permissions:
</label>
<i class="fa fa-info-circle text-info fa-1-5-font-size more-info " aria-hidden="true" title="Please select the permissions this user should be given." data-more-info="Please select the permissions this user should be given.">
</i>
</div>
<div class="col-sm-12">
<div class="col-sm-6">
<input type="checkbox" name="permissionTypeGroup" class="permission-type-group-checkbox" id="add-user-permission-type-group-6" value="6">
<label for="add-user-permission-type-group-6">Perm 1</label>
</div>
<div class="col-sm-6">
<input type="checkbox" name="permissionTypeGroup" class="permission-type-group-checkbox" id="add-user-permission-type-group-4" value="4">
<label for="add-user-permission-type-group-4">Perm 2</label>
</div>
<div class="col-sm-6">
<input type="checkbox" name="permissionTypeGroup" class="permission-type-group-checkbox" id="add-user-permission-type-group-8" value="8">
<label for="add-user-permission-type-group-8">Perm 3</label>
</div>
<div class="col-sm-6">
<input type="checkbox" name="permissionTypeGroup" class="permission-type-group-checkbox" id="add-user-permission-type-group-2" value="2">
<label for="add-user-permission-type-group-2">Perm 4</label>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12">
<div class="row ">
<div class="spacer-sml"></div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="form-group">
<label for="profile-type" class="col-sm-6 control-label">
Role:
</label>
<div class="col-sm-4">
<select id="profile-type" name="profiletype" class="full-length-field ">
<option value="2" title="Users that have the basic access to the system.">General User</option>
<option value="4" title="Users that have basic access and administrative access .">Administrator</option>
</select>
</div>
<div class="col-sm-2">
<i class="fa fa-info-circle text-info fa-1-5-font-size more-info" aria-hidden="true" title="Please enter the users role. 'General User' users have basic access whilst 'Administrator' users have access to administer the site." data-more-info="Please enter the users role. 'General User' users have basic access whilst 'Administrator' users have access to administer the site.">
</i>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12">
<div class="row ">
<div class="spacer-sml"></div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="form-group">
<label for="authentication-type" class="col-sm-6 control-label">
Authentication Type:
</label>
<div class="col-sm-4">
<select id="authentication-type" name="authenticationtype" class="full-length-field ">
<option value="2" title="This is to used by users that can access the web site but dont have any Special user credentials.">INTERNAL</option>
<option value="4" title="This is to used by users that have Special user credentials.">SPECIAL CREDENTIALS</option>
</select>
</div>
<div class="col-sm-2">
<i class="fa fa-info-circle text-info fa-1-5-font-size more-info" aria-hidden="true" title="Please enter the users authentication type. 'INTERNAL' users have their credentials checked against this system, whereas 'SPECIAL CREDENTIALS' users have their credentials checked against the XXX Server."
data-more-info="Please enter the users authentication type. 'INTERNAL' users have their credentials checked against this system, whereas 'SPECIAL CREDENTIALS' users have their credentials checked against the XXX Server.">
</i>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="password-block">
<div class="form-group">
<label for="password" class="col-sm-6 control-label">
Internal Password:
</label>
<div class="col-sm-4">
<input type="password" id="password" name="password" data-toggle="tooltip" value="" class="full-length-field " pattern="^(?=.*[a-zà-ž])(?=.*[A-ZÀ-Ž])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{8,}" title="Passwords must be at least 8 characters including 1 number, 1 uppercase letter, 1 lowercase letter and 1 special character (?=.*?[#?!@$%^&*-])"
required="required">
</div>
<div class="col-sm-2">
<i class="fa fa-info-circle text-info fa-1-5-font-size more-info" aria-hidden="true" title="Please enter the users password. Passwords must be at least 8 characters including 1 number, 1 uppercase letter, 1 lowercase letter and 1 special character (?=.*?[#?!@$%^&*-])."
data-more-info="Please enter the users password. Passwords must be at least 8 characters including 1 number, 1 uppercase letter, 1 lowercase letter and 1 special character (?=.*?[#?!@$%^&*-]).">
</i>
</div>
</div>
<div class="form-group">
<label for="confirm-password" class="col-sm-6 control-label">
Confirm Internal Password:
</label>
<div class="col-sm-4">
<input type="password" id="confirm-password" name="confirm-password" data-toggle="tooltip" value="" class="full-length-field " pattern="^(?=.*[a-zà-ž])(?=.*[A-ZÀ-Ž])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{8,}" required="required">
</div>
<div class="col-sm-2">
<span id="confirm-password-message"></span>
<i class="fa fa-info-circle text-info fa-1-5-font-size more-info" aria-hidden="true" title="Please confirm the internal password" data-more-info="Please confirm the internal password.">
</i>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12">
<div class="row ">
<div class="spacer-sml"></div>
</div>
</div>
<div class="row ">
<div class="spacer-sml"></div>
</div>
<input type="hidden" id="matching-passwords-message" name="matching-passwords-message" value="Passwords Match" autocomplete="off">
<input type="hidden" id="not-matching-passwords-message" name="not-matching-passwords-message" value="Passwords Do Not Match" autocomplete="off">
<div class="form-group">
<div class="col-sm-offset-6 col-sm-6">
<button type="submit" class="btn btn-default btn-primary btn-bottom-space">Add User</button>
<input type="hidden" class="hidden-fps-setting-id" name="selectedFpsSettingId" value="" autocomplete="off">
</div>
</div>
</div>
我创建了以下jsfiddle，它显示了我的问题。 如您所见，内部密码远低于身份验证类型。当身份验证类型不是内部时，我在密码块周围有一个div用于隐藏。
答案
.form-group的底部边缘是造成它的原因。尝试删除底部边距。
.form-group {
margin-bottom: 0;
}
以上是关于错误对齐的引导程序表单元素的主要内容，如果未能解决你的问题，请参考以下文章