从 bootstrap3 移动到 4 时，元素边缘的舍入丢失

对于注册页面，我使用了很棒的字体图标。我将它们连接到输入字段。然后我在边缘对结果元素进行四舍五入。使用引导版本 3.3.7 一切正常。编码：

<div class="form-group">
                <label for="name" class="cols-sm-2 control-label">Your Name</label>
                <div class="cols-sm-10">
                    <div class="input-group">
                        <span class="input-group-addon"><i class="fa fa-id-badge" aria-hidden="true"></i></span>
                        <input type="text" class="form-control" name="name" id="name" placeholder="Enter your Name" />
                    </div>
                </div>
            </div>

CSS：

.form-control {
        border-radius: 30px;
    }

    .input-group-addon {
        border-radius: 30px;
    }

结果：

使用新版本的 bootstrap 4.1.3，这不再可能。这是我的代码：

<div class="form-group">
            @Html.LabelFor(i => i.CSurname, "Фамилия")
            <div class="cols-sm-10">
                <div class="input-group">
                    <span class="input-group-text"><i class="fa fa-id-badge" aria-hidden="true"></i></span>
                    @Html.EditorFor(i => i.CSurname, new { htmlAttributes = new { @class = "form-control", @placeholder = "Введите фамилию" } })
                </div>
            </div>
        </div>

input-group-addon在这里你需要使用它，input-group-text否则一切都是一样的。CSS是一样的：

.input-group-text {
        border-radius: 30px
    }

    .form-control {
        border-radius: 30px
    }

结果是不同的：

请告诉我我做错了什么？我想像第一次一样取得成果。

这是代码的最后一个版本：

<div class="container">
    <div class="form-signin">
        <div class="form-group">
            @Html.LabelFor(i => i.CSurname, "Фамилия")
            <div class="cols-sm-10">
                <div class="input-group">
                    <span class="input-group-text"><i class="fa fa-id-badge" aria-hidden="true"></i></span>
                    @Html.EditorFor(i => i.CSurname, new { htmlAttributes = new { @id = "txtSurname", @class = "form-control", @placeholder = "Введите фамилию" } })
                    @Html.ValidationMessageFor(i => i.CSurname, null, new { @class = "text-danger" })
                </div>
            </div>
        </div>

CSS：

.input-group-text {
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px;
    }

    .form-control {
        border-radius: 30px;
    }

截屏：

生成的标记示例：

<div class="container">
    <div class="form-signin">
        <div class="form-group">
            <label for="CSurname">Фамилия</label>
            <div class="cols-sm-10">
                <div class="input-group">
                    <span class="input-group-text"><i class="fa fa-id-badge" aria-hidden="true"></i></span>
                    <input class="form-control text-box single-line" data-val="true" data-val-required="Требуется поле CSurname." id="txtSurname" name="CSurname" placeholder="Введите фамилию" type="text" value="" />
                    <span class="field-validation-valid text-danger" data-valmsg-for="CSurname" data-valmsg-replace="true" id="mess"></span>
                </div>
            </div>
        </div>