动态生成的RadioButton在屏幕分辨率变化时无法对齐的解决方法

我通过jQuery动态生成了RadioButton，在当前设备屏幕上显示正常，但在其他用户的屏幕上出现对齐问题，想实现不同屏幕分辨率下的对齐效果。

我的代码实现： #

$.each(result, function (key, value) {
    $("#PreferredTimeSlot").append(`<input type="radio" class="form-check-inline mr-2" value="${value.hourlyBasedTime}" name="ManageBooking.PreferredTimeslot" />${value.hourlyBasedTime} <span></span>`);
 });

当前显示效果： #

期望的对齐效果： #

解决方法 #

1. 规范Bootstrap组件结构（最直接）

你用了Bootstrap的form-check-inline类，但缺少标准容器结构，这是对齐混乱的常见原因。修改生成代码，使用Bootstrap官方推荐的单选框结构：

$.each(result, function (key, value) {
    $("#PreferredTimeSlot").append(`<div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" value="${value.hourlyBasedTime}" name="ManageBooking.PreferredTimeslot">
        <label class="form-check-label">${value.hourlyBasedTime}</label>
    </div>`);
 });

Bootstrap的内置样式会自动处理不同屏幕下的垂直居中、选项间距和换行逻辑，从根源解决对齐问题。

2. 自定义容器+固定宽度（适合非Bootstrap场景）

如果不用Bootstrap，给每个单选框选项套一个固定宽度的容器，强制每个选项占据相同水平空间，避免文字长度或屏幕宽度变化导致错位：

$.each(result, function (key, value) {
    $("#PreferredTimeSlot").append(`<div class="time-option">
        <input type="radio" value="${value.hourlyBasedTime}" name="ManageBooking.PreferredTimeslot">
        <span>${value.hourlyBasedTime}</span>
    </div>`);
 });

添加对应CSS：

.time-option {
    display: inline-block;
    width: 120px; /* 根据实际需求调整宽度 */
    margin: 4px 8px;
    vertical-align: middle; /* 确保单选框与文字垂直对齐 */
}

.time-option input {
    margin-right: 6px;
}

3. Flex布局实现响应式对齐

想要更灵活的自适应效果，用Flexbox布局让选项自动换行且保持整齐：

#PreferredTimeSlot {
    display: flex;
    flex-wrap: wrap;
    gap: 16px; /* 选项之间的间距 */
    align-items: center;
}

.time-option {
    display: flex;
    align-items: center;
    min-width: 100px; /* 设置最小宽度，屏幕变窄时自动换行 */
}

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