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 相关文章推荐
屏蔽F1~F12的快捷键的js函数
May 06 Javascript
jQuery中focus事件用法实例
Dec 26 Javascript
js命名空间写法示例
Dec 18 Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 Javascript
jQuery中JSONP的两种实现方式详解
Sep 26 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
JavaScript中this的用法实例分析
Dec 19 Javascript
Javascript前端经典的面试题及答案
Mar 14 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
详解JQuery基础动画操作
Apr 12 jQuery
vue 项目引入echarts 添加点击事件操作
Sep 09 Javascript
详细谈谈JavaScript中循环之间的差异
Aug 23 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生成随机数或者字符串的代码
2008/09/05 PHP
Git命令之分支详解
2021/03/02 PHP
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
2011/11/30 Javascript
jquery动态添加option示例
2013/12/30 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
javascript添加前置0(补零)的几种方法
2017/01/05 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
JS闭包原理与应用经典示例
2018/12/20 Javascript
Python中下划线的使用方法
2015/03/27 Python
Python实现简单拆分PDF文件的方法
2015/07/30 Python
使用pandas读取文件的实现
2019/07/31 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
python 中xpath爬虫实例详解
2019/08/26 Python
python实现简单成绩录入系统
2019/09/19 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
在Python中使用turtle绘制多个同心圆示例
2019/11/23 Python
Python如何将函数值赋给变量
2020/04/28 Python
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
2020/06/30 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
全球性的在线购物网站:Zapals
2017/03/22 全球购物
ktv好的活动方案
2014/08/17 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
大学生见习报告总结
2014/11/04 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
内勤岗位职责范本
2015/04/13 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
2015初中团支部工作总结
2015/07/21 职场文书
医院病假条怎么写
2015/08/17 职场文书
婚礼答谢词范文
2015/09/29 职场文书
MySQL数据库表约束讲解
2022/06/21 MySQL