html - 如何设置从表单集中动态添加的表单的样式

Question

我有一个基本表单，其中包含要由用户填写的字段和一个按钮，该按钮允许用户添加最多十个与基本表单相关的不同表单的实例(这只是通过动态添加表单django 表单集)。当 html 加载基本表单时，所有内容看起来都很棒，但是当我从表单集中添加表单时，CSS 变得困惑，因为表单集中的表单既不符合基本表单 CSS 也不符合我的任何 CSS已经添加到它。

我制作了一个 div 来包含通过 formset 添加按钮添加的所有表单，这样我就可以使用一个 CSS id 来格式化所有添加的表单。但是，似乎没有格式设置 - 添加的表单元素扩展了基本表单的边距并且似乎是 float 的。

HTML:

<div class="center-text jumbotron">

  <h2>Incident Report Form</h2>

  <form method="post" class="form-horizontal">
    {% crispy incident_form %}

    <div id="form_set_class">
      {{ incident_formset.management_form }}
      <table>
        {% for form in incident_formset %}
          {{form.non_filed_errors}}
          {{form.errors}}
          {% crispy form %}
        {% endfor %}
      </table>
    </div>

    <input type="button" id="add_def_report" value="Add Report">

    <div id="empty_form" style="display:none">
      {{incident_formset.empty_form}}
    </div>

    <input type="submit" class="btn btn-primary" value="Submit">

  </form>
</div>

CSS:

.center-text{
  display: block;
  text-align: center;
}

form{
  display: inline-block;
  margin-right: auto;
  margin-left: auto;
  text-align: left;
}

legend {
  float: left; /*allows for top margin */
  border-bottom: 1px solid black;
  margin-bottom: 20px;
  margin-top: 20px;
}

#form_set_class{
  clear: both;
  display: block;
  text-align: center;
}

良好的样式(图像显示表格的顶部):

样式困惑(图像显示表单的底部；添加的表单集从“供应商”下拉列表开始):

Answer 1

我假设您有一个父子模型场景。如果是这样，那么您可以像这样布置您的子窗体(以表格形式布置):

<!-- ABOVE THIS WOULD BE YOUR PARENT FORMS -->

<!-- HERE WE CAN HAVE TABLE HEADER FOR THE FORMS ADDED DYNAMICALLY -->
<table class="table table-bordered table-striped table-sm">
    {{ incident_formset.management_form }}
    {% for form in incident_formset.forms %}
        {% if forloop.first %}
            <thead id="hdrID">
            <tr>
                {% for field in form.visible_fields %}
                    <th>{{ field.label|capfirst }}</th>
                {% endfor %}
            </tr>
            </thead>
        {% endif %}

<!-- HERE WILL BE THE FORMS ADDED BY THE USER -->
        {% for field in form.visible_fields %}
            <td>
            {# Include the hidden fields in the form #}
            {% if forloop.first %}
                {% for hidden in form.hidden_fields %}
                    {{ hidden }}
                {% endfor %}
            {% endif %}
            {{ field.errors.as_ul }}
            {{ field }}
            </td>
        {% endfor %}
    {% endfor %}
</table>

<!-- BELOW THIS WOULD BE THE FORM SUBMISSION AND THE REST -->

然后您可能会考虑使用标签(例如代码中显示的 hdrID)根据您的要求应用 css。