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

Question

在这个简单的示例中，当我在表单左侧的 First Name 输入框中出现验证错误时，E-Mail 表单元素被推到页面下方。

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

我看不出代码有什么不同。这里有一些屏幕截图。我无法让它在 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 添加到您的父容器中。显示 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%;
   }