bootstrap 4 个验证图标在 prestashop 1.7 的整个输入宽度内重复

Question

我正在创建一个 prestashop 1.7.2.1 模块。 Prestashop 附带 bootstrap 4 支持。

我正在尝试将来自 https://v4-alpha.getbootstrap.com/components/forms/#validation 的验证示例与以下代码一起使用：

 <div class="container">
  <form>
    <div class="form-group row has-success">
      <label for="inputHorizontalSuccess" class="col-sm-2 col-form-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control form-control-success" id="inputHorizontalSuccess" placeholder="name@example.com">
        <div class="form-control-feedback">Success! You've done it.</div>
        <small class="form-text text-muted">Example help text that remains unchanged.</small>
      </div>
    </div>
    <div class="form-group row has-warning">
      <label for="inputHorizontalWarning" class="col-sm-2 col-form-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control form-control-warning" id="inputHorizontalWarning" placeholder="name@example.com">
        <div class="form-control-feedback">Shucks, check the formatting of that and try again.</div>
        <small class="form-text text-muted">Example help text that remains unchanged.</small>
      </div>
    </div>
    <div class="form-group row has-danger">
      <label for="inputHorizontalDnger" class="col-sm-2 col-form-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control form-control-danger" id="inputHorizontalDnger" placeholder="name@example.com">
        <div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
        <small class="form-text text-muted">Example help text that remains unchanged.</small>
      </div>
    </div>
  </form>
</div>

使用 Pingendo 4（bootstrap 4 桌面应用程序编辑器）它工作正常。但是当我将此代码添加到我的 prestashop 模块时，所有输入都包含在整个输入宽度内重复的验证图标。

有什么想法吗？

Answer 1

PrestaShop 的 bootstrap CSS 这些图标正在被 PrestaShop 自己的 CSS 覆盖。

禁用背景时属性，它工作正常。

您可以修改CSS并将background属性更改为background-color。

bootstrap 4 个验证图标在 prestashop 1.7 的整个输入宽度内重复

bootstrap 4 validation icons repeat all through the input width with prestshop 1.7

prestashop

twitter-bootstrap-4

prestashop-1.7