如何在Django表单中实现单选按钮内联显示？

问题分析 #

从渲染后的HTML可见，每个单选选项被独立的<div>块级元素包裹，这是导致按钮上下排列的核心原因。Bootstrap的form-check-inline类需要作用于每个选项的容器上，而非父容器或input元素本身。

可行解决方案 #

方案1：自定义CSS强制内联 #

直接通过CSS覆盖默认块级规则，针对目标单选组的子div设置内联显示：

#id_account_type div {
    display: inline-block;
    margin-right: 20px; /* 可选：增加选项间间距 */
}

将这段CSS添加到项目样式文件，或在模板的<style>标签内引入。

方案2：手动渲染单选字段（精准控制样式） #

放弃{% bootstrap_form %}的自动渲染，手动遍历单选选项并添加Bootstrap内联类：
在模板中替换对应字段的自动渲染代码，改为：

<!-- 其他字段仍用bootstrap_form渲染，仅单独处理account_type -->
{% bootstrap_field form.xxx_field %}
{% bootstrap_field form.yyy_field %}

<!-- 手动渲染account_type单选组 -->
<div class="mb-3">
    {% for choice in form.account_type %}
        <div class="form-check form-check-inline">
            {{ choice.tag }}
            <label class="form-check-label" for="{{ choice.id_for_label }}">
                {{ choice.choice_label }}
            </label>
        </div>
    {% endfor %}
</div>

方案3：修正Django表单Widget配置 #

调整表单字段的Widget属性，让Bootstrap渲染时自动为每个选项添加内联类：

account_type = forms.ChoiceField(
    choices=enumerate(('Choice 1', 'Choice 2')),
    widget=forms.RadioSelect(
        attrs={'class': 'form-check-inline'},
        option_attrs={'class': 'form-check-input'} # 给input标签添加类（可选）
    ),
    label='',
)

同时确保Bootstrap Nightshade样式未覆盖form-check-inline的默认内联规则。

内容的提问来源于stack exchange，提问作者watch-this