Как заставить метки разрыва строки с использованием Django-хрустящие-формы

Question

У меня есть следующая схема: Джанго

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, используемые для визуализации формы, могут быть определены template pack и layout. По умолчанию, когда вы ничего не указываете, crispy-forms использует пакет шаблонов bootstrap и макет по умолчанию. Из того, что я вижу, вы используете пакет шаблонов bootstrap3 с макетом по умолчанию. В этом случае вы можете сделать некоторые основные изменения дисплея, используя attributes of the FormHelper.

На самом деле это то, что вы делаете при установке этих атрибутов:

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

С помощью этих двух команд, которые вы говорите, что все этикетки должны иметь класс CSS col-lg-2 и все поля должны иметь вид col-lg-8. Вот почему метки находятся слева от полей и принимают соответственно 1/6 ^th и 4/6 ^th вид (если вы используете сетку из 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 к полю.