Django / Bootstrap 表单 - 输入大小 - Python

Question

我正在学习 Django 和 Bootstrap (5.1.3)，我希望让我的代码尽可能简单以便将来更新。 这就是为什么我在 Django 中使用通用视图（创建/详细信息/编辑...）。效果很好，所有功能现在都可以无缝运行。

我正在努力解决的是我的编辑/创建表单的布局。我找不到增加输入框大小的方法。

我的模型有以下代码：

    class customer(models.Model):
        created_date = models.DateTimeField(auto_now_add = True, editable = False, verbose_name = u"Créé le")
        modified_date = models.DateTimeField(auto_now = True, editable = False, verbose_name = u"Modifié le")
        
        fk_referrer = models.ForeignKey('customer', on_delete=models.CASCADE, verbose_name='Parrain', blank = True, null=True)
        surname = models.CharField('Prénom', max_length=200)
        lastname = models.CharField('Nom', max_length=200)
        phonenumber = PhoneNumberField('Téléphone', blank = True, null = True)
        email = models.EmailField('Email',max_length=100, blank = True, null = True)
        fk_interest = models.ManyToManyField(interests, verbose_name='Interêts', blank=True)
        comments = models.TextField('Commentaires', max_length=2000, blank=True, null = True)
    
        def __str__(self):
            return (self.surname + " " + self.lastname)

我确实创建了一个通用视图：

    class CustomerEditView(UpdateView):
        model = customer
        fields = "__all__"
        template_name = 'client/edition.html'
        success_url = '/client/'

并在 Edition.html 模板中添加了表单：

<form method="POST" enctype="multipart/form-data">
 
    <!-- Security token -->
    {% csrf_token %}
 
    <!-- Using the formset -->
<table>
    {{ form.as_table }}
</table>     
    <input type="submit" value="{% if object %}Mettre à jour{% else %}Créer{% endif %}">
</form>

输出如下所示：

表单布局

文本输入字段不够大。我想至少填满表格（用边框显示） 我认为我应该能够使用表单对其进行整理，并重新定义我的所有视图以使它们更加具体（而不是通用）。但是有没有办法更新视图/引导样式，以便输入字段的宽度将使用所有可用空间？也许在通用视图之上使用表单？

非常感谢您的帮助。

Answer 1

我在 Django 中使用脆皮表单。它们与 bootstrap 一起工作并且非常易于使用。请查看这个示例。
https://simpleisbetterthancomplex.com/tutorial/2018/11/28/advanced-form-rendering-with-django-crispy-forms.html

Answer 2

由于您使用引导程序手动渲染表单元素并使用引导程序表单控件大小类（即 form-control-lg），如下所示。

<div class="col-md-6">
                  <!-- col-md-6 -->
                  <strong>{{ form.email.label_tag }}</strong>{{ form.email|add_class:'form-control form-control-lg' }}
                  <text class="text-danger">{{ form.email.errors }}</text>
                  {% if form.email.help_text %}
                    <small>{{ form.email.help_text|safe }}</small>
                  {% endif %}
                </div>