BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
BootStrap表单验证 FormValidation 是一款功能强大且流行的表单验证插件，它可以帮助开发者快速创建具有良好用户体验的表单验证功能。然而，在某些情况下，反馈图标未正确显示，影响了表单的美观性和可用性。因此，本文将介绍如何调整 BootStrap 表单验证 FormValidation 中的反馈图标位置，以满足不同的需求和布局。
一、默认情况下的反馈图标位置
在 BootStrap 中，默认情况下的反馈图标位置是通过 CSS 样式来定义的。具体来说，`.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>
在上面的实例代码中，我们使用了 Bootstrap 的按钮组组件，并添加了一个自定义的样式来调整反馈图标的位置。
四、调整输入组和下拉菜单的反馈图标位置
对于输入组和下拉菜单，反馈图标的位置也可以通过自定义样式来调整。例如：
.inputGroupContainer .form-control-feedback,
.selectContainer .form-control-feedback {
top: 0;
right: -15px;
}
在上面的实例代码中，我们使用了 `.inputGroupContainer` 和 `.selectContainer` 选择器来调整输入组和下拉菜单的反馈图标位置。
五、结语
本文介绍了如何调整 BootStrap 表单验证 FormValidation 中的反馈图标位置，以满足不同的需求和布局。通过自定义样式，可以快速调整反馈图标的位置，提高表单的美观性和可用性。
