Django使用原生Bootstrap时单选按钮渲染在表单其他字段上方如何解决

你的单选按钮布局异常核心是两个错误的类绑定导致的：

• 包裹单选按钮的<ul>标签被添加了form-control类，Bootstrap的form-control是为输入框、下拉框设计的，默认带有固定高度、内边距规则，套在列表容器上会导致内部单选按钮溢出悬浮
• 单选按钮的<input>元素也被错误添加了form-control类，该类会强制拉伸单选按钮的尺寸，进一步破坏布局

方案1：快速修复（移除错误类+简易CSS适配） #

1. 修改forms.py中单选按钮部件的属性，移除错误的form-control类绑定：

do_what = forms.ChoiceField(
    choices=DO_WHAT_CHOICES, 
    widget=forms.RadioSelect(attrs={'class': "custom-radio-list"})
)

2. 调整前端模板中单选区域的代码，删除ul标签上的form-control类：

<ul id="id_do_what" class="custom-radio-list">

3. 添加如下CSS适配列表样式：

/* 清除列表默认样式 */
.custom-radio-list {
    list-style: none;
    padding-left: 0;
    margin: 8px 0 0 0;
}
/* 调整单选条目间距 */
.custom-radio-list li {
    margin-bottom: 6px;
}
/* 调整单选按钮和文字的间距 */
.custom-radio-list li input {
    margin-right: 6px;
    vertical-align: middle;
}

另外建议同步调整disable_AI复选框的类，复选框不需要form-control类，替换为form-check-input更符合Bootstrap规范，避免后续出现样式问题。

方案2：标准适配（自定义部件输出Bootstrap原生结构） #

如果希望完全贴合Bootstrap的表单规范，去掉Django默认的ul/li包裹结构，可以自定义RadioSelect部件：

1. 自定义部件类：

from django import forms

class BootstrapRadioSelect(forms.RadioSelect):
    template_name = 'widgets/bootstrap_radio.html'
    option_template_name = 'widgets/bootstrap_radio_option.html'

2. 新建模板templates/widgets/bootstrap_radio.html：

<div{% include "django/forms/widgets/attrs.html" %}>
{% for widget in widget.subwidgets %}
    {% include widget.template_name %}
{% endfor %}
</div>

3. 新建模板templates/widgets/bootstrap_radio_option.html：

<div class="form-check my-1">
  <input type="radio" name="{{ widget.name }}" class="form-check-input" 
         id="{{ widget.attrs.id }}" value="{{ widget.value }}" 
         {% if widget.attrs.checked %}checked{% endif %}
         {% if widget.attrs.required %}required{% endif %}>
  <label class="form-check-label" for="{{ widget.attrs.id }}">
    {{ widget.label }}
  </label>
</div>

4. 在表单中替换部件：

do_what = forms.ChoiceField(
    choices=DO_WHAT_CHOICES, 
    widget=BootstrapRadioSelect()
)

该方案渲染出的单选结构完全符合Bootstrap的官方规范，无需额外CSS即可正常展示。

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