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 相关文章推荐
Javascript hasOwnProperty 方法 &amp; in 关键字
Nov 26 Javascript
js 获取子节点函数 (兼容FF与IE)
Apr 18 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
8个超实用的jQuery功能代码分享
Jan 08 Javascript
JS定义类的六种方式详解
May 12 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
May 12 Javascript
JS实现简单的星期格式转换功能示例
Jul 23 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
vue实现多级菜单效果
Oct 19 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的中问验证码
2006/11/25 PHP
php 代码优化的42条建议 推荐
2009/09/25 PHP
用穿越火线快速入门php面向对象
2012/02/22 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
迪菲-赫尔曼密钥交换(Diffie?Hellman)算法原理和PHP实现版
2015/05/12 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
2013/11/08 Javascript
jQuery基础语法实例入门
2014/12/23 Javascript
分享一则javascript 调试技巧
2015/01/02 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
2015/06/05 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
js实现功能比较全面的全选和多选
2017/03/02 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
React 组件间的通信示例
2018/06/14 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
Django模型序列化返回自然主键值示例代码
2019/06/12 Python
Django ORM判断查询结果是否为空,判断django中的orm为空实例
2020/07/09 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
世界上最大的乐器零售商:Guitar Center
2017/11/07 全球购物
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
95%的面试官都会问到的50道Java线程题,附答案
2012/08/03 面试题
大学生学业生涯规划
2014/01/05 职场文书
结婚周年感言
2014/02/24 职场文书
群众路线调研报告范文
2014/11/03 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
放假通知格式
2015/04/14 职场文书
防卫过当辩护词
2015/05/21 职场文书
2016年寒假见闻
2015/10/10 职场文书