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 调整反馈图标位置的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
本文主要分享了js实现增加数字显示的环形进度条效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧2017-02-02
写了几个类，希望对大家有用。...2006-12-12
一个与浏览器有关的脚本 ，也是大家从事WEb前端编程常见的编程技巧，就是判断浏览器的版本，如果发现版本不符合你的设计要求，就给出提示升级浏览器，这样你的网页会更有体验。2010-06-06
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
这篇文章主要介绍了D3.js的基础部分之数组的处理数组的排序和求值(v3版本) ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-05-05
本文给大家分享的是一个简单的JavaScript制作的日历模板，小伙伴们可以根据自己的需求，继续补充，希望大家能够喜欢2016-09-09
uni-app应用配置manifest.json最全最详细配置
这篇文章主要给大家介绍了关于uni-app应用配置manifest.json最全最详细配置,manifest.json文件是UniApp开发中用来配置应用信息的重要文件,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-01-01
这篇文章主要为大家详细介绍了javascript自定义右键菜单插件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
这篇文章主要介绍了uni-app使用微信小程序云函数的步骤示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要为大家详细介绍了仅一个form表单，JavaScript可实现注册信息依次填写提交功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-06-06
Bootstrap入门教程一Hello Bootstrap初识
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap是基于 HTML5、CSS3和Javascriopt开发的。这篇文章主要介绍了基于Bootstrap3实现漂亮简洁的CSS3价格表（精美代码版）,需要的朋友可以参考下2017-03-03
最新评论