错误对齐的引导程序表单元素

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])(?=.*[!@#$%^&amp;*_=+-]).{8,}" title="Passwords must be at least 8 characters including 1 number, 1 uppercase letter, 1 lowercase letter and 1 special character (?=.*?[#?!@$%^&amp;*-])"
                    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 (?=.*?[#?!@$%^&amp;*-])."
                    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 (?=.*?[#?!@$%^&amp;*-]).">
                            </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])(?=.*[!@#$%^&amp;*_=+-]).{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;
}

以上是关于错误对齐的引导程序表单元素的主要内容,如果未能解决你的问题,请参考以下文章

将按钮与带有标签的输入表单对齐

如何在引导流体布局中底部对齐网格元素

Bootstrap h 标签与行类对齐

调整引导表单字段的大小并对齐

在引导程序中单击元素内部时如何禁用切换功能

文本移动元素引导