在这个简单的示例中,当我在表单左侧的名字输入框中出现验证错误时,电子邮件表单元素会被推到页面下方。
当我在表单右侧出现相同的错误时,这种行为不会发生。
我没有看到代码有任何区别。这是一些屏幕截图。我无法让它在 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"> Submit </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>
灵活方法
将
display: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%;
}
由于某种原因,当显示第一个名称输入的验证消息时,它会导致电子邮件字段向左推并确认电子邮件转到下一行。我发现如果你将你的组包裹在
<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>
但这听起来像是一个粗暴的黑客。 我也很高兴能得到关于为什么会发生推动效应的解释。
设置最大高度:0rem,这有效!