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

Question

在这个简单的示例中，当我在表单左侧的名字输入框中出现验证错误时，电子邮件表单元素会被推到页面下方。

当我在表单右侧出现相同的错误时，这种行为不会发生。

我没有看到代码有任何区别。这是一些屏幕截图。我无法让它在 jsfiddle 或 codepen 中工作，所以这里是测试页面的链接，我还在下面粘贴了我的 html：

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

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

<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>

Answer 1

1. 灵活方法

   将

   display:flex

   添加到您的父容器中。显示柔性将使 你的柱子高度相等。

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

2. 错误消息的绝对定位。

   .form-group {
       position: relative;
   }
   
   .errormessageclass {
       position: absolute;
       top: 100%;
       left: 0;
       width: 100%;
   }
   

Answer 2

由于某种原因，当显示第一个名称输入的验证消息时，它会导致电子邮件字段向左推并确认电子邮件转到下一行。我发现如果你将你的组包裹在

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

中，就可以解决这个问题，例如：

<div class="row">
    <div class="col-sm-6 col-xs-12 col-md-6" style="">
        <div class='form-group>first name</div>
    </div>
    <div class="col-sm-6 col-xs-12 col-md-6" style="">
        <div class='form-group>last name</div>
    </div>
</div>
<div class="row">
    <div class="col-sm-6 col-xs-12 col-md-6" style="">
        <div class='form-group>email</div>
    </div>
    <div class="col-sm-6 col-xs-12 col-md-6" style="">
        <div class='form-group>confirm email</div>
    </div>
</div>

https://codepen.io/

但这听起来像是一个粗暴的黑客。 我也很高兴能得到关于为什么会发生推动效应的解释。

Answer 3

设置最大高度：0rem，这有效！