我无法获得与 Bootstrap 文档中所列反馈图标相同的输入效果 http://getbootstrap.com/css/#forms-control-validation在“带有可选图标”部分下。
这是我的代码:
<form role="form" method="post" id="reg_form"> <!-- Reg form -->
<div class="form-group has-success has-feedback">
<label for="username-r" class="col-sm-3 control-label mLabelText">Username</label>
<div class="col-sm-8 form-space">
<input type="text" class="form-control" id="username-r" placeholder="Enter your username" />
<span class="glyphicon glyphicon-ok form-control-feedback" id="username-fg-sp"></span>
<small>Must be between 4-20 characters long</small>
</div>
</div>
</form> <!-- //Reg form -->
下面我有一些 JS 来更改复选标记、十字和警告的图标,但这并不相关,因为一旦我获得基本模板,我就可以让它工作。
基本上,代码确实输出了绿色输入框、绿色标签和复选标记,但在输入字段下方为白色(不是在内部,而是在外部)。我真正感兴趣的是仅在输入字段内获得复选标记。我对为输入字段的轮廓和标签着色不感兴趣。
我在文档中的章节标题下方看到了这个“警告”,上面写着:
Icons, labels, and input groups Manual positioning of feedback icons is required for inputs without a label and for input groups with an add-on on the right. For inputs without labels, adjust the topvalue. For input groups, adjust the right value to an appropriate pixel value depending on the width of your addon.
显然我必须添加一个输入组,我试过了,但没有用。
非常感谢您的宝贵时间和帮助!任何帮助/提示/建议将不胜感激。
最佳答案
您错过了表单标签中的 class="form-horizontal"
。
应该是
<form role="form" method="post" class="form-horizontal" id="reg_form"> <!-- Reg form -->
<div class="form-group has-success has-feedback">
<label for="username-r" class="col-sm-3 control-label mLabelText">Username</label>
<div class="col-sm-8 form-space">
<input type="text" class="form-control" id="username-r" placeholder="Enter your username" />
<span class="glyphicon glyphicon-ok form-control-feedback" id="username-fg-sp"></span>
<small>Must be between 4-20 characters long</small>
</div>
</div>
</form> <!-- //Reg form -->
要将它们全部涂成黑色(而不是绿色),您可以另外执行此操作:
CSS
.mLabelText, #username-r, #username-fg-sp {
color: #000 !important;
border-color: #000;
}
关于jquery - 无法在 Bootstrap 3 中获得带有图标效果的输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22552101/