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

Posted 2023-05-09

【中文标题】FormValidation / formvalidation.io Bootstrap 插件在样式更改时放错了验证图标

【英文标题】：FormValidation / formvalidation.io Bootstrap plug-in misplaces validation icons when the style is changed

【发布时间】：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 包中的错误还是我遗漏了什么？

【参考方案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>