我也遇到过同样的需求。
这是我的解决方案：
形式：
<div class="col-12">
<div class="input-group mb-3">
<span class="input-group-text">Label :</span>
<div class="form-floating">
@Html.EditorFor(model => model.FieldA, new { htmlAttributes = new { @class = "form-control", placeholder = "Field A" } })
@Html.LabelFor(model => model.FieldA)
</div>
<div class="form-floating">
@Html.EditorFor(model => model.FieldB, new { htmlAttributes = new { @class = "form-control", placeholder = "Field B" } })
@Html.LabelFor(model => model.FieldB)
</div>
</div>
</div>
注意：我使用的是 ASP.NET，请将 Editor 和 Label -For 调用替换为您的相应代码：
<input type="text" class="form-control" name="code1" placeholder="Code 1">
<label for="code1">Code 1</label>
<span class="input-group-text"><i class="fas fa-times"></i></span>
找到Bootstrap处理圆角边框的原始方式（V5.1）。以下是原始代码行：
.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu),
.input-group.has-validation > .dropdown-toggle:nth-last-child(n+4) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
margin-left: -1px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-group > .form-control,
.input-group > .form-select {
position: relative;
flex: 1 1 auto;
width: 1%;
min-width: 0;
}
这是我的自定义 css，基于我对 css 选择器的了解（我实际上是后端开发人员）：
.input-group:not(.has-validation) .form-floating:not(:last-child) > :not(.dropdown-toggle):not(.dropdown-menu),
.input-group:not(.has-validation) .form-floating > .dropdown-toggle:nth-last-child(n+3) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group.has-validation .form-floating:nth-last-child(n+3) > :not(.dropdown-toggle):not(.dropdown-menu),
.input-group.has-validation .form-floating > .dropdown-toggle:nth-last-child(n+4) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group .form-floating:not(:first-child) > :not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
/*margin-left: -1px;*/
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
/* for form to be responsive */
.input-group > .form-floating {
position: relative;
flex: 1 1 auto;
width: 1%;
min-width: 0;
}
我想选择器可以大大改进，因为某些情况不会再发生，请随时提交改进！