BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
更新时间：2017年05月17日 15:54:39 作者：北冥没有鱼
这篇文章主要介绍了BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码,需要的朋友可以参考下
在某些情况下，反馈图标未正确显示。默认情况下，Bootstrap定义反馈图标位置如下：
.has-feedback .form-control-feedback {
top: 25px;
right: 0;
}
.form-horizontal .has-feedback .form-control-feedback {
top: 0;
right: 15px;
}
通过自定义值top和right属性，您可以将反馈图标调整为应有的位置。
按钮组
.btn-group .form-control-feedback {
top: 0;
right: -30px;
}
<div class="form-group">
<label class="col-xs-3 control-label">Gender</label>
<div class="col-xs-9">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="gender" value="male" /> Male
</label>
<label class="btn btn-default">
<input type="radio" name="gender" value="female" /> Female
</label>
<label class="btn btn-default">
<input type="radio" name="gender" value="other" /> Other
</label>
</div>
</div>
</div>
输入组 、下拉菜单
#productForm .inputGroupContainer .form-control-feedback,
#productForm .selectContainer .form-control-feedback {
top: 0;
right: -15px;
}
<div class="form-group">
<label class="col-xs-3 control-label">Amount</label>
<div class="col-xs-3 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon">€</span>
<input type="text" class="form-control" name="amount" />
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Color</label>
<div class="col-xs-3 selectContainer">
<select class="form-control" name="color">
<option value="">Choose a color</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="white">White</option>
</select>
</div>
</div>
以上所述是小编给大家介绍的BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
这篇文章主要介绍了jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码,需要的朋友可以参考下2017-08-08
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
这篇文章主要介绍了微信小程序MUI导航栏透明渐变功能,结合实例形式分析了通过改变rgba的a值实现透明度渐变功能的相关操作技巧,需要的朋友可以参考下2019-01-01
这篇文章主要为大家详细介绍了uploadify插件实现多个图片上传并预览，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
这篇文章主要给大家介绍了关于ES6中常见基本知识点的基本使用的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-04-04
JavaScript 映射器 array.flatMap()
这篇文章主要介绍了JavaScript 映射器 array.flatMap()，array.flatMap()是一个映射函数，它接收一个数组和一个映射函数，然后返回一个新的映射数组，下面进入文章了解具体内容2022-02-02
下面小编就为大家分享一篇mui框架 页面无法滚动的解决方法(推荐)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
下面小编就为大家带来一篇关于RequireJS的简单介绍即使用方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这是一款仿淘宝TAB切换搜索框，想搜索哪方面的内容就切换到哪一个，非常实用，喜欢的朋友可以看看2014-09-09
在 JavaScript 中,new 关键字不仅是面向对象编程的关键要素,还是创建实例的重要手段,本文将深入探讨 new 关键字的使用,理解它在对象创建和构造函数调用中的作用,需要的朋友可以参考下2023-11-11
JS中type="button"和type="submit"的区别
Submit是专门用于提交表单的Button，与Button的区别主要有两点：type=button 就单纯是按钮功能，type=submit 是发送表单 。下面通过本文给大家分享JS中type="button"和type="submit"的区别，感兴趣的的朋友一起看看吧2017-07-07
最新评论