如何在bootstrap 4输入字段中找到图标

Question

我有一个简单的bootstrap 4输入字段：

<div class="form-group has-success">
  <label class="form-control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control form-control-success" id="inputSuccess1">
  <div class="form-control-feedback">Success! You've done it.</div>
</div>

此代码的结果是：

问题是如何将检查图标移到左侧？

Answer 1

创建反馈消息位置的引导类是

div.form-control-feedback

根据bootstrap这个类的基础知识如下：

.form-control-feedback {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    pointer-events: none;
}

所以你可以做的是将以下内容添加到CSS

中

.form-control-feedback {
    left: 0;
    display: block;
    text-align: left;
}

如果这不起作用，请尝试添加!important;以否决生成的引导类CSS。

您也可以尝试：

.form-control-feedback {
    position: absolute;
    top: 0;
    right: 200;
    display: block;
    text-align: left;
}

如上所述更改正确的位置并不是最佳解决方案，但如果left: 0;无法正常工作则是第二种解决方案。

希望这有帮助！

Answer 2

只需覆盖form-control-success ...

的背景位置即可

.form-control-success {
    background-position: center left .5625rem;
}

https://www.codeply.com/go/SeJ4SykNxW