使用Bootstrap 4.3+Razor构建表单时单选按钮重叠问题求助

你的单选按钮出现重叠，核心问题是错误地用form-control类容器包裹了单选按钮组，同时两个单选按钮挤在了同一个form-check容器内，违反了Bootstrap 4的表单组件布局规范。

具体修复步骤： #

• 去掉包裹单选按钮组的<div class="form-control">标签，form-control是为文本输入、下拉选择等控件设计的，不适合包裹单选/复选按钮组。
• 给每个单选按钮单独创建一个form-check容器：如果需要横向排列选项，给每个form-check加上form-check-inline类；如果要纵向排列，保留form-check即可。

修改后的Razor代码片段： #

<div class="form-group">
    <label>Pick a Settlement Mode</label>
    <!-- 移除了外层的form-control容器 -->
    <div>
        <!-- 每个单选按钮单独一个form-check容器，加inline实现横向排列 -->
        <div class="form-check form-check-inline">
            @Html.RadioButtonFor(model => model.IsSettlementOnHold, "No", new { @class = "form-check-input", @id = "rbIsSettlementOnHold_No" })
            @Html.Label("rbIsSettlementOnHold_No", "Standard ", new { @class = "form-check-label" })
        </div>
        <div class="form-check form-check-inline">
            @Html.RadioButtonFor(model => model.IsSettlementOnHold, "Yes", new { @class = "form-check-input", @id = "rbIsSettlementOnHold_Yes" })
            @Html.Label("rbIsSettlementOnHold_Yes", "On Request ", new { @class = "form-check-label" })
        </div>
        @Html.ValidationMessageFor(model => model.IsSettlementOnHold, "", new { @class = "text-danger" })
    </div>
</div>

补充说明： #

• 如果需要纵向排列两个单选按钮，只需要去掉form-check-inline类，每个form-check会自动占一行。
• 你自定义的.form-control { height: auto; }样式也可能干扰布局，建议检查是否有必要保留，如果不是必须可以移除，避免影响其他表单控件的默认样式。

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