Bootstrap 4 中不存在 input-group-addon 类？答案

【问题标题】：input-group-addon class is not present in Bootstrap 4?Bootstrap 4 中不存在 input-group-addon 类？
【发布时间】：2018-02-11 14:13:10
【问题描述】：

我一直在 Boostrap 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。但是，代码无法正常工作。 input-group-addon 类不在 Bootstrap 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;
}

我做错了吗？谢谢

【问题讨论】：

标签： css bootstrap-4

【解决方案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>

这里是 link 输入组的官方 Bootstrap 4 迁移指南，如果他们这么说的话

我们为两个新类 .input-group-prepend 和 .input-group-append 删除了 .input-group-addon 和 .input-group-btn。您现在必须显式使用附加或前置，简化我们的大部分 CSS。在追加或前置中，将按钮放置在其他任何地方，但将文本包装在 .input-group-text 中。

【讨论】：