twitter-bootstrap 带有输入组的 Bootstrap 3 验证状态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21645408/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 validation states with input groups
提问by Matt Whetton
How do add bootstrap 3 validation states to input groups. The state seems to only apply to the input part of the group.
如何将引导程序 3 验证状态添加到输入组。状态似乎只适用于组的输入部分。
EDIT 10/02/2014: To clarify, I'm using an input group with a button:
编辑 10/02/2014：为了澄清，我使用了一个带按钮的输入组：
<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>
回答by ragamufin
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>
回答by Zim
Wrap it inside a form-groupand apply the validation state class to the form-group..
将其包裹在 a 中form-group并将验证状态类应用于表单组。
<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-addon">00</span>
</div>
</div>
