添加 Class 到 Crispy 复选框

Question

我正在呈现一个 'InlineCheckboxes'，它将允许用户 select 多个复选框。我可以给整个元素一个 class，但无法弄清楚如何将 class 设置为各个复选框选项。我想给每个人一个 col-3，这样他们就能整齐地对齐。

我已经坚持了好几天并阅读了我能找到的所有内容，但仍然无法弄清楚。

form.py

preferred_topics = forms.MultipleChoiceField(choices=TOPICS, required=False, widget=forms.CheckboxSelectMultiple())

def __init__(self, *args, **kwargs):
        super(NeedsAnalysisForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_method = 'post'
        self.helper.add_input(Submit('submit', 'Submit'))
        self.helper.layout = Layout(            
            '[..text form..]', '[..text form..]', InlineCheckboxes('preferred_topics'), '[..text 
            form..]')

呈现的内容：

<div id="div_id_preferred_topics" class="form-group">
    <label for="" class="">
        Preferred topics
    </label>
    <div class="">
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="custom-control-input" name="preferred_topics" 
                id="id_preferred_topics_1" value="ANI">
            <label class="custom-control-label" for="id_preferred_topics_1">
                Animals
            </label>
        </div>
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="custom-control-input" name="preferred_topics" 
                id="id_preferred_topics_2" value="ART">
            <label class="custom-control-label" for="id_preferred_topics_2">
                 Art
            </label>
        </div>
[..cont..]

但我想要的是：

<div id="div_id_preferred_topics" class="form-group">
    <label for="" class="">
        Preferred topics
    </label>
    <div class="">
        <div class="col-3 custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="custom-control-input" name="preferred_topics" 
                id="id_preferred_topics_1" value="ANI">
            <label class="custom-control-label" for="id_preferred_topics_1">
                Animals
            </label>
        </div>
        <div class="col-3 custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="custom-control-input" name="preferred_topics" 
                id="id_preferred_topics_2" value="ART">
            <label class="custom-control-label" for="id_preferred_topics_2">
                 Art
            </label>
        </div>
[..cont..]

谢谢。

Answer 1

您可以使用以下

而不是使用 {{form | crispy}}

{% load crispy_forms_tags %}


<form action="" method="post">

    {% csrf_token %}

    {% for field in form %}

        <div class="col-3 custom-control custom-checkbox custom-control-inline">
            {{field|as_crispy_field}}
            <label class="custom-control-label" for="{{field.id_for_label}}">{{field.label}}</label>
        </div>

    {% endfor %}

    <button type="submit">Submit</button>

<form>

或者使用脆皮形式 API，我们可以在我们的“模板”文件夹中为这个自定义字段创建一个新模板：

custom_checkbox.html

{% load crispy_forms_field %}

<div class="form-group">
  <div class="custom-control custom-checkbox">
    {% crispy_field field 'class' 'custom-control-input' %}
    <label class="custom-control-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
  </div>
</div>

现在我们可以在我们的 forms.py 模块或名为 fields.py 或其他名称的新 Python 模块中创建一个新的 crispy 字段。

forms.py

from crispy_forms.layout import Field

class CustomCheckbox(Field):
    template = 'custom_checkbox.html'

我们现在可以在我们的表单定义中使用它了：

forms.py

class CustomFieldForm(AddressForm):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.layout = Layout(
            Row(
                Column('email', css_class='form-group col-md-6 mb-0'),
                Column('password', css_class='form-group col-md-6 mb-0'),
                css_class='form-row'
            ),
            'address_1',
            'address_2',
            Row(
                Column('city', css_class='form-group col-md-6 mb-0'),
                Column('state', css_class='form-group col-md-4 mb-0'),
                Column('zip_code', css_class='form-group col-md-2 mb-0'),
                css_class='form-row'
            ),
            CustomCheckbox('check_me_out'),  # <-- Here
            Submit('submit', 'Sign in')
        )

有关详细信息，请参阅 Django Crispy Forms layouts docs

添加 Class 到 Crispy 复选框

Adding Class To Crispy Checkboxes

django

django-forms

django-crispy-forms