如何在Kendo UI Bootstrap 4中正确使用input-group-addon

Bootstrap 4已经废弃了input-group-addon类，改用新结构实现输入组附加元素效果，你当前代码用的是Bootstrap 3写法，所以渲染异常。以下是修正后的代码：

<div class="form-group">
    <label for="amount">Amount</label>
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text">$</span>
        </div>
        <input id="numeric" class="form-control" type="number"
               value="17" min="0" max="100" step="1" />
    </div>
</div>

关键修改点：

• 用input-group-prepend容器包裹前置附加元素（若需后置附加元素，改用input-group-append）
• 将原input-group-addon替换为input-group-text，这是Bootstrap 4定义的输入组附加文本专用类

如果需要结合Kendo UI的NumericTextBox组件，写法如下（Kendo会自动为输入框添加form-control类，无需手动设置）：

<div class="form-group">
    <label for="amount">Amount</label>
    <div class="input-group">
        <div class="input-group-prepend">
            <span class="input-group-text">$</span>
        </div>
        <input id="numeric" type="number" value="17" min="0" max="100" step="1" />
    </div>
</div>

<script>
$("#numeric").kendoNumericTextBox();
</script>

内容的提问来源于stack exchange，提问作者seme