Question

我在Twitter Bootstrap中使用 django-crispy-forms ，我在将表单自定义为多行和多列时遇到了一些问题。一个示例问题是当我尝试将表单拆分为两列时没有任何反应：

class SomeForm(ModelForm):

    helper = FormHelper()
    helper.layout = Layout(
        Column('field1', 'field3'),
        Column('field2', 'field4'),
        )
    )

    class Meta:
        model = Model

查看html输出，我看到有<div class="formColumn">，但表单显示在一个列中。也许这是一个CSS问题？我正在使用Bootstrap 2.1。

Answer 1

感谢maraujo。

我使用div标签和bootstrap文档实现了这一点：http://twitter.github.com/bootstrap/scaffolding.html

class SomeForm(ModelForm):

    helper = FormHelper()
    helper.layout = Layout(
        Div(
            Div('field1', css_class='span6'),
            Div('field3', css_class='span6'),  
        css_class='row-fluid'), 
    )

    class Meta:
        model = Model

对于bootstrap3，将span6替换为col-xs-6 http://getbootstrap.com/css/#grid

Answer 2

martinpaulucci 答案的小2018更新：

对于Bootstrap 4和最新的django-crispy-forms 1.7.2使用：

class SomeForm(ModelForm):

    helper = FormHelper()
    helper.layout = Layout(
        Div(
            Field('field1', wrapper_class='col-md-3'),
            Field('field3', wrapper_class='col-md-9'),  
        css_class='form-row') 
    )

    class Meta:
        model = Model

使用Field标签代替Div标签可以避免使用另一个不必要的包装器div。为了改进这一点，如果要使用多行，可以将crispy-forms Row替换为自己的行：

class Row(Div):
    css_class = "form-row"

然后使用：

class SomeForm(ModelForm):

    helper = FormHelper()
    helper.layout = Layout(
        Row(
            Field('field1', wrapper_class='col-md-3'),
            Field('field3', wrapper_class='col-md-9')  
        ) 
    )

    class Meta:
        model = Model

以django-crispy-forms显示多个行和列

2 个答案: