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实现超精简响应鼠标显示二级菜单代码
Sep 12 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
详解vue-router 2.0 常用基础知识点之router-link
May 10 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 Javascript
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
五分钟搞懂Vuex实用知识(小结)
Aug 12 Javascript
基于JavaScript 实现拖放功能
Sep 12 Javascript
Openlayers显示瓦片网格信息的方法
Sep 28 Javascript
JavaScript中EventBus实现对象之间通信
Oct 18 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
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
NO3第三帝国留言簿制作过程
2006/10/09 PHP
使用Discuz关键词服务器实现PHP中文分词
2014/03/11 PHP
ThinkPHP后台首页index使用frameset时的注意事项分析
2014/08/22 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
js 自定义的联动下拉框
2010/02/07 Javascript
JavaScript 事件系统
2010/07/22 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
jquery实现简洁文件上传表单样式
2015/11/02 Javascript
Angular中$compile源码分析
2016/01/28 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
Vue2 监听属性改变watch的实例代码
2018/08/27 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
2018/10/31 Javascript
vue请求本地自己编写的json文件的方法
2019/04/25 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
python实现多线程抓取知乎用户
2016/12/12 Python
详解python进行mp3格式判断
2016/12/23 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
2019/10/23 HTML / CSS
html5 figure和figcaption的使用方法
2018/09/10 HTML / CSS
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
高分子材料与工程专业推荐信
2013/12/01 职场文书
预备党员入党自我评价范文
2014/03/10 职场文书
幼儿园元旦主持词
2015/07/06 职场文书