Blazor ASP.NET Core 7单选按钮与文本对齐及间距问题求助

问题根源分析 #

原代码存在两个关键问题：

• InputRadioGroup错误使用了form-control类，该类为文本输入框设计，会干扰单选按钮组的布局逻辑。
• 单选按钮与文本未通过合适容器包裹，缺少垂直对齐和间距控制的样式。

修改方案 #

1. 调整组件结构与代码

替换原代码为以下内容，通过容器布局实现对齐与间距控制：

<div class="form-group row align-items-center">
    <label for="example-text-input" class="col-3 col-form-label">
        AccessType
    </label>

    <div class="col-9">
        <InputRadioGroup @bind-Value="@appsdata.AccessType">
            @foreach (var option in rdaccessOptions)
            {
                <div class="radio-option mb-2">
                    <InputRadio Value="@option" />
                    <span>@option</span>
                </div>
            }
        </InputRadioGroup>
    </div>
</div>

2. 添加自定义CSS样式

在组件的<style>标签或全局样式文件中添加以下样式：

.radio-option {
    display: flex;
    align-items: center;
    gap: 8px; /* 控制单选按钮与文本的间距，可按需调整数值 */
}

.radio-option input[type="radio"] {
    margin: 0; /* 移除浏览器默认的单选按钮外边距，避免多余间距 */
}

方案说明 #

• 使用align-items-center确保左侧标签与右侧单选组垂直居中对齐。
• 每个单选选项用radio-option容器包裹，通过Flex布局实现单选按钮与文本的垂直对齐，gap属性精准控制两者间距。
• 移除InputRadioGroup上的form-control类，消除Bootstrap输入框样式的干扰。
• 用mb-2（Bootstrap内置类）给每个选项添加底部间距，替代原代码的<br />，让选项布局更规整。

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