html - 如何在 Bootstrap 输入右侧添加图标？

Question

我有一个片段代码：

<div class="container" style="margin: 50px">
  <div class="form-group">
    <span class="fa fa-search form-control-icon"></span>
    <input type="text" class="form-control" placeholder="Search">
  </div> 
</div>

.form-group .form-control {
    padding-left: 2.375rem;
}

.form-group .form-control-icon {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}

如何更改当前的 CSS 以使图标位于右侧？

似乎padding-right: 2.375rem;还不够。

标签： htmlcss

Answer 1

您应该使用right具有适当值的属性将其向右移动。检查这个小提琴（我使用'x'因为某种原因图标没有加载到小提琴中）。