如何在 django-crispy-forms 中使输入框的宽度彼此相同？

Question

我正在用 Django 重写我的网站，我想使用 Django 表单，因为它比在 HTML 中手动编写每个表单更容易。我查看了 Cripy-Forms 文档，发现有一个叫做 Layout 的东西。我不知道我是否按预期使用，或者我是否一遍又一遍地重复自己，但这是我得到的：

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'
    )

{% 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 %}

正如你所看到的，输入框的长度不一样，这是不好的。就好像每一行都没有使用完整的宽度。我怎样才能让它们使用相同的宽度？

我也很感激其他建议，比如完成整个表格的更简单的方法。也许在我的情况下使用 Row 是一个更好的主意？

Answer 1

<input>

 和 

<select>

 元素的 CSS 样式确实很痛苦，但这正是您所需要的。 Crispy 将允许您添加类来指定元素。您的 

<input>

 是一种宽度（默认？），您的 

<select>

 是不同的。

我发现 Firefox 浏览器对于实验非常有帮助。您可以右键单击并“检查”，然后添加或删除 CSS 属性（？），直到找到有效的方法。然后将它们添加到您的样式表中。

我的一个例子（对于带有 css_class="multi-wide" 的 Crispy MultiField...）

div.multi-wide div.range-field input { width: 18em; }