bootstrap 4中不存在input-group-addon类？

Question

我一直在Boostrap 4测试版中使用此代码,一切正常.

<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.但是,由此,代码无法正常工作.该input-group-addon班是不存在的引导css文件.

如果我将它添加到我的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;
}

我在做错了吗？谢谢

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-group-prepend和.input-group-append删除了.input-group-addon和.input-group-btn.你现在必须明确地使用append或prepend,简化我们的CSS.在附加或前置中,将按钮放在其他任何位置,但在.input-group-text中包装文本.