在 Django 中样式化表单渲染

Question

我正在使用Django 2.x

我使用Formset 可以一次添加多条记录。

表单在template文件中呈现为

{{ chapter_questions.as_table }}

下面的模板看起来很丑。

我正在使用Bootstrap 模板来设计我的模板，使其看起来像

为了像第二张图片一样渲染模板，我手动将字段编写为

<div class="form-group">
    <div class="col-sm-12 col-xs-12">
        <label for="question">Word</label>
            <input name="chapterquestion_set-0-word" type="text" class="form-control border-color-2" placeholder="Word" id="question">

            {% if chapterquestion_set.word.errors %}
            <div class="row">
                <div class="col-sm-12">
                    <div class="alert alert-danger">
                        <ul>
                            {% for error in chapter_questions.word.errors %}
                            <li>{{ error }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        {% endif %}

    </div>

    <div class="col-sm-12 col-xs-12">
        <label for="definition">Definition</label>
        <input name="chapterquestion_set-0-definition" type="text" class="form-control border-color-3" placeholder="Definition" id="definition">

        {% if chapter_questions.definition.errors %}
        <div class="row">
            <div class="col-sm-12">
                <div class="alert alert-danger">
                    <ul>
                        {% for error in chapter_questions.definition.errors %}
                        <li>{{ error }}</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
        {% endif %}
    </div>

    <div class="col-sm-12 col-xs-12">
        <label for="audio"></label>
        <input name="chapterquestion_set-0-audio" type="text" class="form-control border-color-4" placeholder="Audio" id="audio">

        {% if chapter_questions.audio.errors %}
        <div class="row">
            <div class="col-sm-12">
                <div class="alert alert-danger">
                    <ul>
                        {% for error in chapter_questions.audio.errors %}
                        <li>{{ error }}</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>

这样我必须为多个对象多次编写代码。此外，为了添加新的对象字段，我需要使用 JavaScript 通过更新 1 来替换索引号（在本例中为 0）来复制整个代码。

如何设置表单小部件的样式，以便我可以利用 Django 自动字段插入和错误显示，并且只需要 {{ chapter_questions.as_bootstrap_div }} 来呈现引导表单。

Answer 1

模板/字段/text-field.html

<div class="col-sm-12 col-xs-12">
    {{field.label_tag}}
    <input name="{{field.name}}" type="text" class="form-control border-color-2" placeholder="{{field.label}}" id="{{field.name}}">

    {% if field.errors %}
    <div class="row">
        <div class="col-sm-12">
            <div class="alert alert-danger">
                <ul>
                    {% for error in field.errors %}
                    <li>{{ error }}</li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
    {% endif %}
</div>

在您的表单上

{% with chapterquestion_set.word as field %}
    {% include 'fields/text-field.html' %}
{% endwith %}