Bootstrap 4中没有input-group-addon类？

Question

我一直在使用这段代码，适用于Bootstrap 4 beta，一切都很好。

<label for="username" th:text="#{login.user">User</label>
<div class="input-group">
    <span class="input-group-addon"><i class="icon-user"></i></span> <input
        type="text" id="username" name="username" class="form-control"
        placeholder="Usuario" th:placeholder="#{login.user}"
        th:required="true" />
</div>

现在，我已将Bootstrap 4更新到最新的v4.0.0版本，但是代码不起作用。 Bootstrap css文件中不存在input-group-addon类。

如果我将这个添加到我的css样式文件中，一切都可以正常工作：

.input-group-addon {
    padding: .375rem .75rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
}

我做错什么了吗？谢谢。

- davisoski

Answer 1

看起来你需要使用带有<span class="input-group-text"><i class="icon-user"></i></span>的必填包装图标才能正确显示它。

<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text"><i class="icon-user"></i></span>
        <input ...>
    </div>
</div>

这里是官方Bootstrap 4迁移指南中关于输入组(Input Groups)的链接，其中提到：

我们放弃了.input-group-addon和.input-group-btn两个类，转而使用两个新类.input-group-prepend和.input-group-append。现在必须明确使用append或prepend，在append或prepend中，将按钮放置在任何其他位置一样，但要用.input-group-text包装文本。

- Ameba Brain