带有输入组的 Bootstrap 3 验证状态 [英] Bootstrap 3 validation states with input groups
本文介绍了带有输入组的 Bootstrap 3 验证状态的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何将引导程序 3 验证状态添加到输入组.状态似乎只适用于组的输入部分.
EDIT 10/02/2014:澄清一下,我使用的是带按钮的输入组:
<label class="control-label"></label><div class="input-group"><input type="text" class="form-control"><span class="input-group-btn"><button class="btn btn-default" type="button">Go!</button></span>
解决方案
诀窍是将实际输入放在它自己的块中.请尝试以下操作:
<div class="input-group"><div style="position:relative"><!-- 输入和验证状态的子容器--><input name="emailAddress" type="text" class="form-control" value=""><span class="glyphicon glyphicon-remove form-control-feedback"><!----></span><span class="input-group-btn"><button id="button-send" type="submit" class="btn btn-primary">Go!</button></span>
How do add bootstrap 3 validation states to input groups. The state seems to only apply to the input part of the group.
EDIT 10/02/2014: To clarify, I'm using an input group with a button:
<div class="form-group has-success col-md-3">
<label class="control-label"></label>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
解决方案
The trick is to place the actual input in its own block. Try the following:
<div class="form-group has-feedback">
<div class="input-group">
<div style="position:relative"><!-- sub container for the input and validation state -->
<input name="emailAddress" type="text" class="form-control" value="">
<span class="glyphicon glyphicon-remove form-control-feedback"><!----></span>
</div>
<span class="input-group-btn">
<button id="button-send" type="submit" class="btn btn-primary">Go!</button>
</span>
</div>
</div>
这篇关于带有输入组的 Bootstrap 3 验证状态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!