BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码


Posted in Javascript onMay 17, 2017

在某些情况下,反馈图标未正确显示。默认情况下,Bootstrap定义反馈图标位置如下:

.has-feedback .form-control-feedback {
  top: 25px;
  right: 0;
}
.form-horizontal .has-feedback .form-control-feedback {
  top: 0;
  right: 15px;
}

通过自定义值top和right属性,您可以将反馈图标调整为应有的位置。

按钮组

BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码

.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>

输入组 、下拉菜单

BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码

#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 调整反馈图标位置的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
总结一些js自定义的函数
Aug 05 Javascript
javascript jQuery $.post $.ajax用法
Jul 09 Javascript
javascript动态改变img的src属性图片不显示的解决方法
Oct 20 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
Jan 24 Javascript
高效率JavaScript编写技巧整理
Aug 23 Javascript
js获取时间并实现字符串和时间戳之间的转换
Jan 05 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
Feb 28 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
微信小程序 定位到当前城市实现实例代码
Feb 23 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
vue mvvm数据响应实现
Nov 11 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 #Javascript
vue之nextTick全面解析
May 17 #Javascript
Vue.js学习教程之列表渲染详解
May 17 #Javascript
JavaScript运动框架 解决速度正负取整问题(一)
May 17 #Javascript
深入理解Commonjs规范及Node模块实现
May 17 #Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 #Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
May 17 #Javascript
You might like
PHP中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
PHP的引用详解
2015/02/22 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
Laravel框架Eloquent ORM删除数据操作示例
2019/12/03 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
Jquery颜色选择器ColorPicker实现代码
2012/11/14 Javascript
js实现div的切换特效上一个下一个
2014/02/11 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
react redux入门示例
2018/04/19 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
从零学Python之入门(二)基本数据类型
2014/05/25 Python
将Python代码打包为jar软件的简单方法
2015/08/04 Python
基于Python3 逗号代码 和 字符图网格(详谈)
2017/06/22 Python
Python冲顶大会 快来答题!
2018/01/17 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
python 瀑布线指标编写实例
2020/06/03 Python
python 元组的使用方法
2020/06/09 Python
Python 高效编程技巧分享
2020/09/10 Python
PHP开发的一般流程
2013/08/13 面试题
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
财务会计专业毕业生自荐信
2013/10/19 职场文书
夜班门卫岗位职责
2013/12/09 职场文书
办公室前台岗位职责范本
2013/12/10 职场文书
房地产融资计划书
2014/01/10 职场文书
企业员工薪酬方案
2014/06/04 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
酒店仓管员岗位职责
2015/04/01 职场文书
电话营销开场白
2015/05/29 职场文书
护士工作心得体会
2016/01/25 职场文书
原生JS封装vue Tab切换效果
2021/04/28 Vue.js
python 详解turtle画爱心代码
2022/02/15 Python