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。但是，由此，代码无效。 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;
}

我做错了吗？感谢

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迁移指南link，他们说

我们已经为两个新类，.input-group-prepend和.input-group-append删除了.input-group-addon和.input-group-btn。你现在必须明确地使用append或prepend，简化我们的CSS。在附加或前置中，将按钮放在其他任何位置，但在.input-group-text中包装文本。

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

1 个答案: