如何在django-crispy-forms中让输入框宽度保持一致？

我正在用Django重写个人网站，想用Django forms替代手动编写HTML表单以提升效率。查阅django-crispy-forms文档后使用了Layout功能，但不确定用法是否正确，当前表单代码和模板如下，现在输入框宽度不一致，无法充分利用行宽，请问怎么让所有输入框宽度统一？同时希望得到表单实现的优化建议，比如是否适合使用Row布局？

当前代码 #

表单代码 #

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Fieldset, Submit, HTML, Div
from django import forms

from .models import Member


class EnrollForm(forms.ModelForm):
    message = forms.CharField(widget=forms.Textarea)

    def __init__(self):
        super().__init__()
        self.helper = FormHelper()
        self.helper.form_show_labels = False
        self.helper.layout = Layout(
            Fieldset(
                '',
                input_with_icon('bi bi-person', 'first_name'),
                input_with_icon('bi bi-person', 'last_name'),
                input_with_icon('bi bi-123', 'student_id'),
                input_with_icon('bi bi-building', 'department'),
                input_with_icon('bi bi-list-ol', 'degree'),
                input_with_icon('bi bi-envelope', 'email'),
                input_with_icon('bi bi-telephone', 'mobile_number'),
                input_with_icon('bi bi-chat-left-text', 'group_chat_platform'),
                input_with_icon('bi bi-send', 'message'),
            ),
            Submit('submit', 'Üye Ol', css_id='signup-btn')
        )

    class Meta:
        model = Member
        fields = ['first_name',
                  'last_name',
                  'student_id',
                  'department',
                  'degree',
                  'email',
                  'mobile_number',
                  'group_chat_platform']


def input_with_icon(icon_class, field_name):
    return Div(
        Div(
            HTML(
                f"""<span class="m-3">
                    <i class="{icon_class} fs-2" style="color: #ff4100;"></i>
                </span>"""
            ),
            css_class='input-group-prepend'
        ),
        field_name,
        css_class='input-group mb-3'
    )

HTML模板代码 #

{% extends "base/boilerplate.html" %}
{% load crispy_forms_tags %}
{% block content %}
    <div class="container-sm align-items-center">
        <div class="py-2 mt-4 align-items-center">
            <div class="ml-5 pt-3 align-items-center form-container">
                <h1 class="text-center mb-5">Topluluğumuza Katılın</h1>
                <form method="POST" enctype="multipart/form-data" style="max-width: 40%; margin: 0 auto;">
                    {% crispy form %}
                </form>
            </div>
        </div>
    </div>
{% endblock content %}

解决方案：统一输入框宽度 #

输入框宽度不一致的核心原因是普通输入框与Textarea（message字段）默认样式不同，且未强制设置占满容器宽度。可以通过以下两种方式解决：

方法1：修改input_with_icon函数，为字段添加宽度样式 #

先导入Field组件：

from crispy_forms.layout import Layout, Fieldset, Submit, HTML, Div, Field

再修改input_with_icon函数，用Field组件包裹字段并添加样式类，确保输入框占满父容器：

def input_with_icon(icon_class, field_name):
    # 给字段添加form-control和w-100类，强制占满容器
    field = Field(field_name, css_class='form-control w-100')
    return Div(
        Div(
            HTML(
                f"""<span class="m-3">
                    <i class="{icon_class} fs-2" style="color: #ff4100;"></i>
                </span>"""
            ),
            css_class='input-group-prepend'
        ),
        field,
        css_class='input-group mb-3 w-100'  # 外层容器也设置占满宽度
    )

方法2：通过CSS全局统一样式 #

在项目CSS文件中添加以下规则：

.input-group .form-control {
    width: 100% !important;
}
.input-group {
    width: 100% !important;
}

表单实现优化建议 #

1. 修复__init__方法参数问题 #

当前__init__未接收*args, **kwargs，会导致实例化表单时（如传递instance参数）出错，修改为：

def __init__(self, *args, **kwargs):
    super().__init__(*args, **kwargs)
    # 后续helper设置保持不变

2. 合理使用Row布局提升紧凑性 #

如果希望表单布局更紧凑（比如将姓和名放在同一行），非常适合使用Row+Column布局。先导入对应组件：

from crispy_forms.layout import Layout, Fieldset, Submit, HTML, Div, Field, Row, Column

再修改Layout部分：

self.helper.layout = Layout(
    Fieldset(
        '',
        Row(
            Column(input_with_icon('bi bi-person', 'first_name'), css_class='col-md-6'),
            Column(input_with_icon('bi bi-person', 'last_name'), css_class='col-md-6'),
            css_class='mb-3'
        ),
        input_with_icon('bi bi-123', 'student_id'),
        input_with_icon('bi bi-building', 'department'),
        input_with_icon('bi bi-list-ol', 'degree'),
        input_with_icon('bi bi-envelope', 'email'),
        input_with_icon('bi bi-telephone', 'mobile_number'),
        input_with_icon('bi bi-chat-left-text', 'group_chat_platform'),
        input_with_icon('bi bi-send', 'message'),
    ),
    Submit('submit', 'Üye Ol', css_id='signup-btn', css_class='w-100')  # 提交按钮也设置为占满宽度
)

3. 优化helper额外设置 #

可以给helper添加统一的表单样式类，增强布局可控性：

self.helper.form_class = 'form-horizontal'
self.helper.label_class = 'col-lg-2'
self.helper.field_class = 'col-lg-10'

注：因你隐藏了标签，该设置可根据实际需求选择是否启用。

4. 优化Textarea显示效果 #

message字段的Textarea默认高度可能不合适，可在定义字段时调整：

message = forms.CharField(widget=forms.Textarea(attrs={'rows': 4, 'placeholder': '请输入你的留言...'}))

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