Django/Jquery.formset：使用“添加新”按钮时如何在表单集之间留出空格？

Question

我在使用 Jquery.formset 时遇到了“美容”问题。

我有一个带有嵌套子表单（formset）的表单，我使用 JQuery 添加（或删除）子表单（删除和添加新按钮）

“问题”是添加了子表单但崩溃了

我想用
添加新的子表单，但不知道如何继续...

感谢您的帮助

html

{% extends 'layouts/base.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% load widget_tweaks %}
{% block extrahead %}{% endblock %}
{% block title %}Utilisateurs | Mereva{% endblock %}
{% block content %}

<!-- Source code: https://codewithmark.com/easily-edit-html-table-rows-or-cells-with-jquery -->
<!-- Source code: https://whoisnicoleharris.com/2015/01/06/implementing-django-formsets.html -->
<div class='container'>
    <br>        
    <br>
    <h1 id="utilisateur" data-parameters="">Formulaire utilisateur</h1>
    <br><br>

    <div class="row">
    </div>
    <form id="utilisateureditform" method="POST" class="post-form">
        {% csrf_token %}
        {{ form|crispy }}
        <br><br><div class="dropdown-divider"></div><br><br>
        <h2>Applications</h2><br><br>
        <!-- {{ application|crispy }} -->

        {{ application.management_form }}
        <div class="row">
            <div class="col-6">Nom de l'application</p></div>
            <div class="col-5"><p>Droits</p></div>
            <div class="col-1"></div>
        </div>      
        {% for application_form in application %}

        <div class="row link-formset">
            {% if application_form.instance.pk %}{{ application_form.DELETE }}{% endif %}
            <div class="col-6">

                    {{ application_form.app_app_nom }}
                    {% if application_form.app_app_nom.errors %}
                        {% for error in application_form.app_app_nom.errors %}
                            {{ error|escape }}
                        {% endfor %}
                    {% endif %}

            </div>
            <div class="col-5">

                    {{ application_form.app_dro }}
                    {% if application_form.app_dro.errors %}
                        {% for error in application_form.app_dro.errors %}
                            {{ error|escape }}
                        {% endfor %}
                    {% endif %}

            </div>
            <div class="hidden">{{ application_form.app_ide }}</div>
        </div><br>
        {% endfor %}

        {% if application.non_form_errors %}
            {% for error in application.non_form_errors %}
                {{ error|escape }}
            {% endfor %}
        {% endif %} 

        <br>
        <input class="btn btn-primary" type="submit" value="Valider" style="width: 100px;">
        <a data-modal data-target="" class="btn btn-danger" href="{% url 'project:index' %}" style="width: 100px;">Annuler</a>
    </form>

{% endblock %}
{% block extrabody %}
<script src="{% static 'project/js/jquery.formset.js' %}"></script>
<script type="text/javascript">

    $('.link-formset').formset({
        addText: 'Ajouter',
        deleteText: 'Supprimer',
        prefix: '{{ application.prefix }}'
    });

    $(document).ready(function() {
        $('html body div.container form#utilisateureditform.post-form a.add-row').before('<br>');
    });


</script>
{% endblock %}

Answer 1

使用 CSS 设置和管理应用程序的表示层。

一个新的 CSS 类可以帮助创建您需要的空间。

将课程添加到您的<div>。

{{ application.management_form }}
<div class="row make-space-below">

然后将<style> 标签添加到您的模板中。

<style>
    .make-space-below {
        margin-bottom: 50px;
    }
</style>

这有点骇人听闻。一般来说，您应该尝试拥有一个包含您的样式的.css 文件。 .css 文件可以缓存在浏览器中，从而减少对服务器的请求和.html 文件的大小。