如何通过Django Crispy Forms实现表单字段横向排列？

核心思路 #

要让表单字段横向排列，关键是通过Crispy Forms的布局类自定义渲染结构，或者结合Bootstrap的横向布局类（若使用Bootstrap模板包）来调整字段排列方式。

具体实现方法 #

方法一：用Row+Column自定义布局 #

修改forms.py中的PrimaryForms类，通过Layout手动组织字段为横向结构：

from django import forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column

class PrimaryForms(forms.Form):
    # 替换为你的实际表单字段
    username = forms.CharField(label="用户名")
    email = forms.EmailField(label="邮箱")
    phone = forms.CharField(label="手机号")

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_tag = False  # 禁用默认表单标签，避免多余嵌套
        # 用Row包裹多个Column，每个Column对应一个字段，通过css_class控制宽度
        self.helper.layout = Layout(
            Row(
                Column('username', css_class='col-md-4'),
                Column('email', css_class='col-md-4'),
                Column('phone', css_class='col-md-4'),
                css_class='g-3'  # 可选：添加字段间的间距
            )
        )

方法二：直接给字段添加横向布局类 #

若不想自定义Layout，可给字段widget添加Bootstrap类，同时给表单容器设置横向布局：

class PrimaryForms(forms.Form):
    username = forms.CharField(
        label="用户名",
        widget=forms.TextInput(attrs={'class': 'form-control col-md-4'})
    )
    email = forms.EmailField(
        label="邮箱",
        widget=forms.EmailInput(attrs={'class': 'form-control col-md-4'})
    )
    phone = forms.CharField(
        label="手机号",
        widget=forms.TextInput(attrs={'class': 'form-control col-md-4'})
    )

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_class = 'row g-3'  # 父容器设置横向布局类
        self.helper.form_tag = False

模板层正确渲染 #

确保模板中加载Crispy标签并正确渲染表单：

{% load crispy_forms_tags %}
<div class="container mt-4">
    <form method="post">
        {% csrf_token %}
        {{ form|crispy }}
        <button type="submit" class="btn btn-primary mt-3">提交</button>
    </form>
</div>

排查配置未生效的常见问题 #

• 确认settings.py中已注册Crispy相关应用和指定模板包：

  INSTALLED_APPS = [
      # 其他应用
      'crispy_forms',
      'crispy_bootstrap5',  # 若用Bootstrap5，对应修改版本
  ]
  CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap5"
  CRISPY_TEMPLATE_PACK = "bootstrap5"
  

• 检查表单__init__方法是否正确初始化FormHelper，没有遗漏或覆盖布局的代码。
• 确保模板用{{ form|crispy }}渲染，而非原生的{{ form.as_p }}/{{ form.as_table }}等方式。

内容的提问来源于stack exchange，提问作者Adamu Abdulkarim Dee