Отображение нескольких строк и столбцов в django-crispy-forms

Я использую 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? Я использую Bootstrap 2.1.


django twitter-bootstrap django-crispy-forms
person martinpaulucci    schedule 27.08.2012    source источник

Ответы (2)


arrow_upward
35
arrow_downward

Спасибо мараужо.

Я добился этого, используя тег 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

person martinpaulucci    schedule 28.08.2012
comment
Хорошо, я запишу это в документации для других людей, это хорошая практика. - person maraujop; 29.08.2012
comment
@maraujop Если мне нужна настоящая «таблица», какой шаблон мне следует переопределить? Я не могу найти его. - person Marconi; 10.05.2013
comment
Crispy не занимается сервировкой стола, и вы не должны этого делать. Макеты таблиц HTML устарели уже как минимум десятилетие. - person Shayne; 13.01.2015
comment
Для bootstrap3 также замените «row-fluid» на «row» - person David Wheaton; 13.11.2017
comment
Для bootstrap4 см. ответ @pepjin ниже - person Shaun F; 26.12.2018

arrow_upward
13
arrow_downward

Небольшое обновление 2018 года по ответу martinpaulucci:

Для 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 своей собственной, если вы собираетесь использовать более одной строки:

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
person Pepijn    schedule 15.03.2018
comment
Куда идет переопределяющий класс строки? - person dbinott; 26.11.2018
comment
Вы можете поместить его в тот же файл перед классом формы. - person Pepijn; 27.11.2018