简体   繁体   中英

Bootstrap inline form button alignment

Button alignment after validation not proper.

<form class="form-inline form-padding">
        <div class="form-group">
            <div class="input-group">
                <input class="form-control" placeholder="First Name" name="firstname" type="text" />
            </div>
        </div>

        <div class="form-group">
            <div class="input-group">
                <input class="form-control" placeholder="Last Name" name="lastname" type="text" />
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <button type="submit" id="form-button" class="btn btn-primary">Load</button>
            </div>
        </div>
    </form>

Validation code:

$('form').validate({
        rules: {
            firstname: {
                minlength: 3,
                maxlength: 15,
                required: true
            },
            lastname: {
                minlength: 3,
                maxlength: 15,
                required: true
            }
        },
        highlight: function(element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function(error, element) {
            if(element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        }
    });

The form works great, but the moment i click on Load button the alignment of button is not proper. I could not create a fiddle, i have attached the screen-shot of the same.

Before Form Submission 在Form Submition之前

After Form Submission 在此输入图像描述

Button alignment after validation not proper.

Adding this CSS aligns the form correctly again:

.form-inline > .form-group {
    vertical-align: top;
}

http://jsfiddle.net/Au33X/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM