BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
2019/6/27 20:57:49
本文主要是介绍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 调整反馈图标位置的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对找一找教程网网站的支持!
这篇关于BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-29如何在 Vuex 中设置,获取和遍历数据?-icode9专业技术文章分享
- 2024-11-28Vue-router课程:初学者快速入门指南
- 2024-11-28初学者指南:antdesignvue学习入门教程
- 2024-11-28Vue CLI资料入门教程
- 2024-11-28Vue CLI资料:新手入门指南
- 2024-11-28Threejs的三维坐标系
- 2024-11-27AntDesignVue入门指南:轻松搭建美观的Vue项目
- 2024-11-27Egg.js入门指南:新手必备的零基础教程
- 2024-11-27Hotkeys.js开发入门教程
- 2024-11-27Ant Design Vue入门指南:轻松搭建美观界面