如何在 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

创建反馈信息位置的bootstrapclass是

div.form-control-feedback

根据 bootstrap class 的基础知识如下：

.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; 以否决 bootstrap class 生成的 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

如何在 bootstrap 4 输入字段中定位图标

How to locate icon inside bootstrap 4 input field

twitter-bootstrap

twitter-bootstrap-4