如何使用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'))

我的問題是

所以，即使我調整瀏覽器大小，他們也會堅持在各自領域的頂部。

來源

2015-10-06 neversaint

用於呈現表單的HTML和CSS可能由template pack和layout定義。默認情況下，當您不指定任何內容時，crispy-forms將使用引導程序模板包和默認佈局。從我所看到的，您正在使用默認佈局的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類。

來源

2015-10-09 09:00:39 Djizeus

如何使用Django，脆皮形式強制標籤換行

回答

相關問題