如何增加 Django 表单的大小答案

【问题标题】：How do I increase the size of a Django form如何增加 Django 表单的大小
【发布时间】：2020-02-29 12:49:56
【问题描述】：

这是我第一个使用 Django 的项目。我正在创建一个表单，如下面的屏幕截图所示，表单太窄了。我希望输入字段能够跨越整个屏幕，当表单那么窄时这是不可能的。如何增加表单的宽度？

from django import forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit, Layout, Row, Field
from ..models import EvilSnippet

class AddSnippet(forms.Form):

class Meta:
    model = EvilSnippet

code_language = forms.ChoiceField(
    label = "Select Language",
    choices = (("Java", "Java"), ("Python", "Python"), ("C#", "C#")),
    required = True,
)

severity = forms.ChoiceField(
    label = "Severity",
    choices = (("HIGH", "HIGH"), ("MEDIUM", "MEDIUM"), ("LOW", "LOW")),
    required = True,
)

description = forms.CharField(
    label = "Description",
    required = False,
    #widget=forms.TextInput(attrs={'size': '20'})
)

code = forms.CharField(
    label = "Code",
    required = False,
    widget=forms.Textarea()
)

def __init__(self, *args, **kwargs):
    super(AddSnippet, self).__init__(*args, **kwargs)
    self.helper = FormHelper()
    self.helper.form_id = 'id-addSnippet'
    self.helper.form_class = 'uniForms'
    self.helper.form_method = 'post'
    self.helper.form_action = 'submit_snippet'

    self.helper.layout = Layout(
        Row(
            Field('code_language', wrapper_class='col-md-6'),
        ),
        Row(
            Field('severity', wrapper_class='col-md-6'),
        ),
        Row(
            Field('description', wrapper_class='col-md-6'),
        ),
        Row(
            Field('code', wrapper_class='col-md-6'),
        )
    )

    self.helper.add_input(Submit('submit', 'Submit'))

和

{% extends 'base.html' %}
{% load crispy_forms_tags %}


{% block content %}
<!-- <form action = '' method="post"> -->
<!-- Very Important csrf Token -->
 {% csrf_token %}
 <!-- <table> -->
     {% crispy form %}
 <!-- </table> -->
<!-- </form> -->
{% endblock %}

【问题讨论】：

为此，您需要一些 CSS 样式。查看宽度属性。类似form#id-addSnippet { width: 100%;}
就是这样 - 非常感谢 :)
我很高兴它对你有用！我发布了我的评论作为答案，请随时将其标记为已接受。您也可以考虑在您的问题中添加css 标签。

标签： python django django-crispy-forms

【解决方案1】：

要控制网页的显示，您需要使用 CSS。对于您的情况，您需要使用 width 属性。像这样的东西应该适合你：

form#id-addSnippet {
    width: 100%;
}

这会将 ID 为 id-addSnippet 的表单的宽度设置为其包含块的 100%。

有关width: 100% 含义的更多详细信息，请参阅this answer。

【讨论】：

【解决方案2】：

您的输入元素会是您的wrapper_class 吗？你有引导类col-md-6，它占用了一半的可用空间也许可以试试col-md-12???

【讨论】：