如何使用Django-crispy-forms强制标签换行

Question

我有以下django方案：

forms.py

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

class ContactForm(forms.Form):
    name_param        = forms.CharField()
    email_param       = forms.EmailField()
    message_param     = forms.CharField(widget=forms.Textarea)
    captcha_div = "<div class=\"g-recaptcha\" data-sitekey=\"xxxxxoBjAnlYtR\"></div> <br>"

    class Meta:
        pass
    def __init__(self, *args, **kwargs):
        """
        Forms for contact.
        """
        super(ContactForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_id = 'id-contactForm'
        self.helper.form_class =  'form-horizontal'
        self.helper.label_class = 'col-lg-2'
        self.helper.field_class = 'col-lg-8'
        self.helper.form_method = 'post'
        self.fields['name_param'].label = "Name"
        self.fields['email_param'].label = "Email"
        self.fields['message_param'].label = "Message"
        self.helper.layout = Layout(
            Field('name_param'),
            Field('email_param'),
            Field('message_param'),
            HTML(self.captcha_div),
          )

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

我的问题是

这样，即使我调整浏览器的大小，它们也将停留在各自字段的顶部。

Answer 1

用于呈现表单的HTML和CSS可以由模板包和布局定义。 默认情况下，当您不指定任何内容时，crispy-forms使用引导程序模板包和默认布局。 据我所知，您正在使用具有默认布局的bootstrap3模板包。 在这种情况下，您可以使用FormHelper的属性对显示进行一些基本更改。

实际上，这是设置这些属性时要执行的操作：

    self.helper.label_class = 'col-lg-2'
    self.helper.field_class = 'col-lg-8'

有了这两个说明，您就是说所有标签都应具有CSS类col-lg-2而所有字段都应具有col-lg-8形式。 这就是为什么标签上的字段的左侧，分别以^1/6和4/6 ^个视图（如果你使用的是12列网格）。 由于您希望标签和字段位于单独的行上，因此您可以简单地指定一个CSS类，该类采用整个视图的宽度：

    self.helper.label_class = 'col-lg-12'
    self.helper.field_class = 'col-lg-12'

请注意，如果您想要响应式响应，则可以利用引导网格的功能。 例如，如果您希望字段与大屏幕上的标签在同一行上，而小屏幕上的标签在下面，则可以执行以下操作：

    self.helper.label_class = 'col-md-4'
    self.helper.field_class = 'col-md-8'

您甚至可以给该字段几个CSS类。