Question

我有一个基本表单，其中包含要由用户填写的字段，还有一个按钮，允许用户添加多达十个与基本表单相关的其他表单实例（这只是通过以下方式动态添加表单） django formset）。加载html时，基本表单和所有内容看起来都很不错，但是当我去从表单集中添加表单时，CSS搞砸了，因为表单集中的表单既不符合基本表单CSS也不符合我的任何CSS已添加到其中。

我做了一个div，以包含所有通过formset add按钮添加的表单，以便可以使用一个CSS ID格式化所有添加的表单。但是，似乎没有格式可用-添加的表单元素扩大了基本表单的边距，并且似乎是浮动的。

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。

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

1 个答案: