如何在Django中为Bootstrap表单的复选框添加form-check容器？

方法一：手动渲染表单字段 #

放弃{{ form }}整体渲染，逐个输出字段，给复选框单独套Bootstrap的form-check容器：

<form method="post">
  {% csrf_token %}
  <!-- 普通文本/文本域字段 -->
  <div class="mb-3">
    {{ form.text_field.label_tag }}
    {{ form.text_field }}
    {% if form.text_field.errors %}
      <div class="text-danger">{{ form.text_field.errors }}</div>
    {% endif %}
  </div>

  <!-- 复选框字段，套form-check容器 -->
  <div class="form-check mb-3">
    {{ form.checkbox_field }}
    {{ form.checkbox_field.label_tag }}
    {% if form.checkbox_field.errors %}
      <div class="text-danger">{{ form.checkbox_field.errors }}</div>
    {% endif %}
  </div>

  <button type="submit" class="btn btn-primary">提交</button>
</form>

注意：复选框要把input放在label前面，符合Bootstrap结构要求。

方法二：自定义复选框Widget #

在forms.py里自定义Widget，让复选框自动被form-check包裹：

from django import forms
from django.forms.widgets import CheckboxInput
from .models import Test

class CustomCheckboxInput(CheckboxInput):
    def render(self, name, value, attrs=None, renderer=None):
        input_html = super().render(name, value, attrs, renderer)
        label_text = self.attrs.get('label', '')
        return f'''
        <div class="form-check">
            {input_html}
            <label class="form-check-label" for="{attrs['id']}">{label_text}</label>
        </div>
        '''

class TestForm(forms.ModelForm):
    class Meta:
        model = Test
        fields = '__all__'
        widgets = {
            'text_field': forms.TextInput(attrs={'class': 'form-control'}),
            'textarea_field': forms.Textarea(attrs={'class': 'form-control'}),
            'checkbox_field': CustomCheckboxInput(attrs={'class': 'form-check-input', 'label': '复选框说明'}),
        }

之后模板仍可直接用{{ form }}，复选框会自动生成正确结构。

方法三：覆盖Django表单模板 #

创建自定义的复选框渲染模板，让全局复选框自动套用结构：

1. 在项目templates目录下创建django/forms/widgets/checkbox.html文件
2. 写入以下内容：

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

Django渲染复选框时会自动使用该模板，生成符合Bootstrap要求的布局。

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