15

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

class SomeForm(ModelForm):

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

    class Meta:
        model = Model

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

4

3 回答 3

35

谢谢马劳乔。

我已经使用 div 标签和引导文档实现了这一点：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

于 2012-08-28T13:33:50.807 回答
14

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
于 2018-03-15T18:56:51.650 回答
1

Django3 + ModelForm 在同一行显示多个字段时出现问题，如下所示

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

    self.helper = FormHelper(self)
    self.helper.layout = Layout(
        Row(
            Column('nom', css_class='form-group col-2 mb-0'),
            Column('email', css_class='form-group col-4 mb-0'),
        )
    )

我注意到 Crispy "row" 类实际上是一个与 Bootstrap 4 类不匹配的 "form-row" 类。

Pepijn 的提示完成了这项工作。谢谢

于 2021-10-13T15:46:42.097 回答