FormValidation / formvalidation.io Bootstrap 插件在样式更改时放错了验证图标答案

【问题标题】：FormValidation / formvalidation.io Bootstrap plug-in misplaces validation icons when the style is changedFormValidation / formvalidation.io Bootstrap 插件在样式更改时放错了验证图标
【发布时间】：2021-07-04 13:51:22
【问题描述】：

这是FormValidation 包中的错误还是我遗漏了什么？

当我测试一个标准的、普通的、开箱即用的 Bootstrap 页面（比如来自 this page 的“堆叠表单”示例）时，表单会验证并正确放置其图标。

但如果我做任何其他事情，请说将一个项目附加到输入组：

<div class="form-group">
  <label>Price</label>
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">$</span>
    </div>
    <input type="text" class="form-control" name="price" />
    <div class="input-group-append">
      <span class="input-group-text">.00</span>
    </div>
  </div>
</div>

然后图标放错了：

如果我更改字体大小或完全调整标签，情况只会变得更糟：

<style>
  body {
    font-size: 14px;
  }
  label {
      display: inline-block;
      max-width: 100%;
      margin-bottom: 0px;
      font-weight: 700
  }
  .form-control {
    font-size: 14px;
  }
</style>

如果你有 FormValidation 包，你可以使用this fiddle 作为起点，自己测试一下。

这又是FormValidation/formvalidation.io 包中的错误还是我遗漏了什么？

【问题讨论】：

标签： css layout bootstrap-4 formvalidation-plugin formvalidation.io

【解决方案1】：

要控制表单大小，我只能建议您使用专用的 Bootstrap 类：here 或 there

要正确放置您的图标，您可能需要再次使用自己的类。

.fv-plugins-bootstrap .form-group.row.three-char .fv-plugins-icon {
  right: 35px;
}

.fv-plugins-bootstrap .form-group.row.four-char .fv-plugins-icon {
  right: 45px;
}

<div class="form-group three-char">
  <label>Price</label>
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">$</span>
    </div>
    <input type="text" class="form-control" name="price" />
    <div class="input-group-append">
      <span class="input-group-text">.00</span>
    </div>
  </div>
</div>

【讨论】：