以django-crispy-forms形式显示多个行和列 [英] Displaying multiple Rows and Columns in django-crispy-forms

问题描述

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

  class SomeForm（ModelForm）：
 
 helper = FormHelper（）
 helper.layout =布局（
列（'field1'，'field3'），
列（'field2'，'field4'） ，
）
）
 
 class Meta：
 model =模型
  

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

解决方案

感谢maraujo。

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

  class SomeForm（ModelForm）：
 
 helper = FormHelper （）
 helper.layout =布局（
 Div（
 Div（'field1'，css_class ='span6'），
 Div（'field3'，css_class ='span6' ）
 css_class ='row-fluid'），
）
 
 class Meta：
 model = Model 
  / pre> 
 
 
对于bootstrap3将 span6 替换为 col-xs-6   http://getbootstrap.com/css/#grid  
 
I'm using django-crispy-forms with Twitter Bootstrap , and I'm having some issues with customizing my forms into multiple rows and columns. One example problem is that nothing happens when I try to split the form into two columns:
class SomeForm(ModelForm):

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

    class Meta:
        model = Model
Looking at the html output, I see that there is the <div class="formColumn">, but the form is displayed in one single column. Maybe is this an css issue? I am using Bootstrap 2.1.
解决方案
Thanks maraujo.

I've achieved this using the div tag and the bootstrap docs: 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
For bootstrap3 replace span6 with col-xs-6 http://getbootstrap.com/css/#grid

                        
这篇关于以django-crispy-forms形式显示多个行和列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！