如何增加 Django 表单的大小

How do I increase the size of a Django form

这是我使用 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 %}

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

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

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

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

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