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

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。为了改善这一点，如果您要使用多个行，可以用自己的脆性行替换：

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

Answer 3

2022 年 6 月martinpaulucci和Pepijn的答案更新：
对于 Bootstrap 5 和 django-crispy-forms 1.14.0，css_class = "form-row" 不再有效。而是使用“行”：

class Row(Div):
    css_class = 'row'

下面是使用上面Pepijn定义的 Row 类 (forms.py) 的示例实现：

class Row(Div):
    css_class = 'row g-3'

class BlogUserCreationForm(UserCreationForm):
    """
    Create a custom user creation form using the custom BlogUser user model.
    """
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.layout = Layout(
            Row(
                Field('username', wrapper_class='form-group col-md-6 mb-0'),
                Field('email', wrapper_class='form-group col-md-6 mb-0'),
            ),
            'password1',
            'password2',
            Row(
                Field('first_name', wrapper_class='form-group col-md-4 mb-0'),
                Field('last_name', wrapper_class='form-group col-md-4 mb-0'),
                Field('date_born', wrapper_class='form-group col-md-4 mb-0'),
            ),
            'short_bio',
            Submit('submit', 'Submit')
        )

    class Meta:
        model = BlogUser
        fields = ("username", 'email', 'password1', 'password2', 'first_name', 'last_name', 'date_born', 'short_bio')

（我在实现中将“g-3”添加到我的 css_class 中，以在行之间添加间距）。

如果有人好奇，在我的 settings.py 中，按照文档，crispy_template_pack 仍然定义为 bootstrap4 ；然而，据我发现，bootstrap5 似乎仍然可以与 django-crispy-forms 一起使用。

CRISPY_TEMPLATE_PACK = 'bootstrap4'