如何在Django ModelForm中将CheckboxInput渲染为网格布局？

DevOps 小满

2026-9-25

错误原因及修复方案

1. 核心错误：缺少`row`基础类

Bootstrap的网格系统要求，所有带col类以及row-cols-*类的父容器必须同时添加row类，你只写了row-cols-4没有加row，网格样式自然不会生效。

2. 次要问题：遍历范围错误

你当前的循环会把title、text这类非复选框字段也塞进4列网格中，这类字段默认占满全宽，会直接撑乱网格结构。

3. 冗余配置：不需要`layout='horizontal'`

layout='horizontal'是用于实现标签、输入框左右排列的水平表单布局，用在网格内的复选框上只会增加多余的宽度限制和边距，反而影响网格效果。

修改后可直接运行的代码

模板部分调整

{% extends "base.html" %}
{% block content %}
{% load static %}
{% load bootstrap5 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
{% bootstrap_messages %}

{# 单独渲染非复选框字段 #}
{% bootstrap_field form.title %}
{% bootstrap_field form.text %}

{# 复选框网格：父元素必须加row类，g-2用于设置列间距避免元素挤在一起 #}
<div class="row row-cols-4 g-2">
    {% for field in form %}
        {% if 'choice_' in field.name %}
            <div class="col">{% bootstrap_field field %}</div>
        {% endif %}
    {% endfor %}
</div>

{# 后续提交按钮等其他代码 #}
{% endblock %}