Question

在这个简单的示例中，当我在表单左侧的First Name输入框中出现验证错误时，电子邮件表单元素会被压缩到页面上。

Picture of form issue on left side

但是当我在窗体右侧出现相同的错误时，不会发生此行为。

Picture of no issue on the right side

我发现代码没有任何区别。这是一些屏幕截图。我无法在jsfiddle或codepen中使用它，所以这里是测试页面的链接，我也粘贴了下面的html：

https://www.blastyourresume.com/testing/formalignment/test.cfm

要在该页面上重现错误，请在firstname字段中键入内容，然后将其删除。如果您在右侧重复此过程，则不会获得相同的行为。

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container" align="center">
    <form name="frmSignup" id="frmSignup" method="post">
        <div class="col-sm-6 col-xs-12 col-md-6">
            <div class="form-group" align="left">
                <label>First Name</label>
                <input type="text" placeholder="First Name" id="firstname" name="firstname" maxlength="50" class="form-control">
            </div>
        </div>
        <div class="col-sm-6 col-xs-12 col-md-6">
            <div class="form-group" align="left">
                <label>Last Name</label>
                <input type="text" placeholder="Last Name" id="lastname" name="lastname" maxlength="50" class="form-control">
            </div>
        </div>
        <div class="col-sm-6 col-xs-12 col-md-6">
            <div class="form-group" align="left">
                <label>E-Mail Address</label>
                <input type="text" placeholder="E-Mail" id="email" name="email" maxlength="100" class="form-control">
            </div>
        </div>
        <div class="col-sm-6 col-xs-12 col-md-6">
            <div class="form-group" align="left">
                <label>Confirm E-Mail Address</label>
                <input type="text" placeholder="Confirm E-Mail" id="confirmemail" name="confirmemail" maxlength="100" class="form-control">
            </div>
        </div>
        <div class="col-sm-12 col-xs-12 col-md-12">
            <button type="submit" name="btnSubmit" class="btn btn-primary" id="btnSubmit">&nbsp;&nbsp;Submit&nbsp;&nbsp;</button>
        </div>
    </form>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

＆＃13;

Answer 1

出于某种原因，当显示第一个名称输入的验证消息时，它会导致电子邮件字段被向左推，并确认电子邮件将转到下一行。我发现，如果你在SELECT CONCAT (A.fname, ' ', A.lname) AS OwnerName, A.ownerno, B.propertyno, B.ownerno FROM PrivateOwner AS A INNER JOIN PropertyforRent AS B ON A.ownerno = B.ownerno LEFT JOIN viewing AS C SELECT ownerno, COUNT(ownerno), viewdate FROM Max_Property GROUP BY ownerno ORDER BY COUNT(ownerno) DESC WHERE ROWNUM = 1 and viewdate IS NULL;中包装表单组，可以修复它：

<div class="row"></div>

https://codepen.io/

但这听起来像是一个粗暴的黑客。我也很感激地解释为什么推动效应会发生。

Answer 2

Flex方法

将display:flex添加到您的父容器中。显示flex会使你的列等于高度。

#frmSignup {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

错误消息的绝对定位。

.form-group {
    position: relative;
}

.errormessageclass {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
}

Bootstrap验证错误导致表单对齐问题

2 个答案: