将django-crispy形式的字段水平对齐到页面中心?

时间:2014-11-21 06:45:43

标签: django django-crispy-forms

我有一个字段表单,我希望水平对齐和页面中心。

我想启用自动对焦和占位符。

这是我的代码:

class VinForm(forms.Form):
    VIN = forms.CharField(max_length=17, label='VIN')

    def __init__(self, *args, **kwargs):
        super(VinForm, self).__init__(*args, **kwargs)

        self.helper = FormHelper()
        self.helper.form_method = 'post'
        #self.helper.form_class = 'form-horizontal col-xs-12 col-md-6 col-lg-5'
        self.helper.form_class = 'form-horizontal'
        #self.helper.form_class = 'form-inline col-md-12'
        #self.helper.label_class = 'col-xs-3 col-md-3 col-lg-3'
        #self.helper.field_class = 'col-xs-12 col-md-12 col-lg-12'
        #self.helper.form_class = 'form-inline'

        self. helper.layout = Layout(
            FieldWithButtons('VIN', StrictButton("Go!"), autofocus=True, placeholder='JN1HJ01F8RT231164'),
        #     Div(
        # Div('VIN',css_class='col-md-6',autofocus=True, placeholder='JN1HJ01F8RT231164'),
        # css_class='row',
        #     ),
        #     Fieldset(
        #         #'Get Driving profile',
        #    Field('VIN', autofocus=True, placeholder='JN1HJ01F8RT231164'),
         #    ),
        #     FormActions(
        #         Submit('submit', 'get vehicle info'),
        #    ),
        # )
        )

你可以从我上面的代码中看到,我尝试了许多仍然没有用的东西。这是它的外观。

enter image description here

缺乏

1)页面中心

2)内联表格

3)自动对焦和占位符不起作用

我正在使用twitter bootstrap3

2 个答案:

答案 0 :(得分:0)

我执行以下操作。请注意以下代码段中的“字段”,我们在css_class中指定了其他CSS。这是文档link

 def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

        
        self.helper = FormHelper()
        self.helper.layout = Layout(

            Row(
                HTML('<h3>About you</h4>'),
                Column(Field('computers', css_class='text-center'), css_class='col-md-12 text-center')
            ),

https://stackoverflow.com/a/24812832/960471

答案 1 :(得分:-3)

crispy表单文档显示了如何为引导程序执行水平表单,这可能会有所帮助。 http://django-crispy-forms.readthedocs.org/en/latest/crispy_tag_forms.html?highlight=horizontal#bootstrap3-horizontal-forms