我有一个简单的表单,通过jqBootstrapValidation处理错误。我设置了它,以便在浏览器足够宽时它是水平的。这是它的外观: https://i.stack.imgur.com/GCK3r.png
但是,当我输入一封错误的电子邮件时,表单不再对齐。https://i.stack.imgur.com/SYkcY.png
这是我正在使用的代码。我只是无法让它工作。
<form class="form-inline">
<div class="form-group form-group-lg">
<div class="col-lg-6 text-center">
<label class="sr-only" for="name">Full Name</label>
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Full name" name="name" required data-validation-required-message="Please enter your full name." >
<p class="help-block text-danger"></p>
</div>
</div>
<div class="form-group form-group-lg">
<div class="col-lg-6 text-center">
<label class="sr-only" for="name">Your email</label>
<input type="email" class="form-control" type="text" id="formGroupInputLarge" placeholder="Your email" name="email" required data-validation-required-message="Please enter your email." data-validation-email-message="email not valid">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-lg-12 text-center">
<div id="success"></div>
<button type="submit" id="submit" class="btn btn-success btn-lg">Submit</button>
</div>
</form>
有什么提示吗?多谢!
问题是错误消息出现在同一列中并向上推送文本框。我相信您要么必须将其添加到内容下方的另一列或行。
我不知道这是否会对您有所帮助,但是当我进行引导验证时,我将工具提示属性和 has 错误类添加到div。
<div class="form-group has-error">
<input id="txtEmail" type="text" class="form-control" data-toggle="tooltip" data-placement="right" title="Email is not valid.">
</div>
这将突出显示红色文本框,并在悬停时显示错误消息,从而节省空间。
HTML 的设置方式不正确。你需要有<div class="col-lg-6">
结束,然后彼此相邻地开始。您现在设置它的方式是form-group
在外面,表格单元格在里面。此外,您还应该具有<div class="row">
,以便表知道何时添加了新行。
<form class="form-inline">
<div class="row">
<div class="col-lg-6 text-center">
<div class="form-group form-group-lg">
<label class="sr-only" for="name">Full Name</label>
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Full name" name="name" required data-validation-required-message="Please enter your full name.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-lg-6 text-center">
<div class="form-group form-group-lg">
<label class="sr-only" for="name">Your email</label>
<input type="email" class="form-control" type="text" id="formGroupInputLarge" placeholder="Your email" name="email" required data-validation-required-message="Please enter your email." data-validation-email-message="email not valid">
<p class="help-block text-danger"></p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 text-center">
<div id="success"></div>
<button type="submit" id="submit" class="btn btn-success btn-lg">Submit</button>
</div>
</div>
</form>
尝试此设置,看看您的代码对齐是否混乱。
我得到了各种答案。我设法让它工作。这是最终代码。
<form>
<div class="row">
<div class="col-sm-6 text-center">
<div class="form-group form-group-lg">
<label class="sr-only" for="name">Full Name</label>
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Full name" name="name" required data-validation-required-message="Please enter your full name.">
<div class="help-block text-danger"></div>
</div>
</div>
<div class="col-sm-6 text-center">
<div class="form-group form-group-lg">
<label class="sr-only" for="name">Your email</label>
<input type="email" class="form-control" type="text" id="formGroupInputLarge" placeholder="Your email" name="email" required data-validation-required-message="Please enter your email." data-validation-email-message="Email is not valid">
<div class="help-block text-danger"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 text-center">
<input type="hidden" name="location" value="toronto">
<div id="success"></div>
<button type="submit" id="submit" class="btn btn-success btn-lg">Submit</button>
</div>
</div></form>
如果您发现我的答案有问题,请随时发表评论!